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