Small program development changes a property value of an array or an object in data

Source: Internet
Author: User

In the development of small programs, when we facilitate the data array or object in the view, in many cases we need to dynamically change the array or the attribute value of a certain incense in the object in JS. : I give you a summary of the following: Wxml:
<scroll-view class= ' Hd-cont ' scroll-x= "true" style= ' width:100% ' >    <view wx:for= ' {{sdate}} ' wx:key= ' {{ Index}} "class= ' Date-cont ' >        <view>{{item.week}}</view>        <view bindtap= ' select ' Data-index= "{{index}}" class= ' Curl {{item.selected}} ' >{{item.date}}</view>    </view></ Scroll-view>

  

WXSS as follows:
. hd-cont {    height:126rpx;    White-space:nowrap;    PADDING-LEFT:20RPX;    Color: #fff;    FONT-SIZE:28RPX;    Box-sizing:border-box;}. Date-cont {    width:40rpx;    MARGIN-RIGHT:70RPX;    height:100%;    Display:inline-block;    PADDING-TOP:10RPX;    Box-sizing:border-box;    Text-align:center;}. Curl {    width:40rpx;    HEIGHT:40RPX;    border-radius:50%;    LINE-HEIGHT:40RPX;}. Date-cont view:first-child {    margin-bottom:20rpx;}. Focus {    display:inline-block;    WIDTH:40RPX;    HEIGHT:40RPX;     Font-family:monaco; " > #fff;    Color: #16cc80;    border-radius:50%;    LINE-HEIGHT:40RPX;}

  

Wxjs as follows: The realization of the idea: click on a date, get the current click on the following table, click the event Bindtap can get to the clicked element of the custom properties, that is, the clicked element in the data array subscript, click Trigger, empty all objects selected values, The selected value of the clicked subscript is then changed to focus to enable the click of an element to dynamically change an attribute value in the array.
Page ({data: {sdate: [{"Week": "Day", "date": "", "" Selected ":" Focus "}, {" Week ":" One "," date ":" 02 ","  Selected ":"}, {"Week": "Two", "Date": ",", "Selected": "}, {" Week ":" Three "," Date ":" "," Selected ":"        "}, {" Week ":" Four "," date ":" "," "Selected": "}, {" Week ":" Five "," date ":" "," Selected ":"}, {"Week": "Six", "Date": "", "" Selected ":"}, {"Week": "Day", "date": "", "Selected": "}, {" Week ":" One "," Date ":" Selected "," "", ""}, {"Week": "Two", "date": "Ten", "Selected": "}, {" Week ":" Three "," date ": "One", "Selected": "}, {" Week ":" Four "," date ":" A "," Selected ":"}, {"Week": "Five", "date": "", "Selec Ted ":"}, {"Week": "Six", "date": "+", "Selected": "},]},select:function (e) {var oindex = E.current    Target.dataset.index;    var array = this.data.sDate; Array.foreach ((Item,index,arr) = {var Sitem = "sdate[" + index + "].selected";        This.setdata ({[Sitem]: ""}) Console.log ([Sitem]); if (index = = oindex) {var oselected = "sdate[" + index + "].selected"//Here you need to stitch the set properties with a string THIS.SETDA Ta ({[oselected]: "Focus"})})})
Here Setaria also to everybody summed up, hope to everyone has help, have problems remember timely feedback Oh, setaria and everyone progress together.

Small program development changes a property value of an array or an object in data

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.