注釋的比較詳細,就不過做多解釋了。
//index.js
//獲取應用實例
const app = getApp()
Page({
// 這里data就是你當前界面所有的值。包括你后期動態添加的值都在這里
data: {
list: [{ //定義數組
number: 1
},
{
number: 1
},
{
number: 1
},
{
number: 1
},
{
number: 1
}
]
},
//事件處理函數
itemSelect: function(e) {
// 這里說一下他們的區別:target指向發生事件的組件,currentTarget指向綁定事件的組件
// 1.currentTarget: 綁定的事件當前元素及其子元素都會觸發
// 2.target: 綁定的事件 子元素不會被觸發事件
var _this = this;
console.log(e); //仔細看控制台
//list就是你js中data中的定義的一個數組變量,[]里面的值代表數組的下標,number是你申明的這個數組中的key,拼接在一起,結果就是當前下標的值
var index = "list[" + e.currentTarget.dataset.index + "].number"; //這里必須這樣拼接
//因為小程序中分有邏輯層和渲染層等。所以我們需要用setdata函數,渲染到視圖界面。
_this.setData({ //異步刷新,就是渲染
//這里進行賦值
[index]: 0 //修改值為0
})
},
})
<!--index.wxml-->
<view class="container">
<!-- wx:key可以什么都不用寫,我就是為了不讓控制台出現警告,強迫症 -->
<view class='bg' wx:for="{{list}}" wx:key="">
<!-- 這里的{{index}}是wx:for自帶的,直接引用就行了 -->
<text bindtap='itemSelect' data-index="{{index}}">number:{{item.number}}</text>
</view>
</view>
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
}
.bg {
color: green;
border: 2rpx solid crimson;
margin: 20rpx;
}
text {
padding: 10rpx;
}
懶得復制的朋友,可以點一下~
Demo地址
