tab切换(动态修改data里数组的值)
dom:
<view class="{{ item.isChoose ? 'list_item' : 'special' }}" wx:for="{{ list }}" wx:key="id" bindtap="handleClick" data-index="{{ item.id }}">{{ item.title }}</view>
css:
.list_item {
width: 238rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background: linear-gradient(180deg, #BEEA7C 0%, #4B8D33 100%);
border-radius: 0px 0px 14px 12px;
border: 1rpx solid #A9E351;
color: #FFFFFF;
font-size: 28rpx;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
margin: 0 40rpx;
letter-spacing: 10rpx;
}
js:
list: [{
id: 0,
title: '我的奖品',
isChoose: true
},{
id: 1,
title: '我的兑换',
isChoose: false
}]
handleClick(e) {
let query = e.target.dataset.index;
this.data.list.forEach((item, index) => {
if (item.id == query) {
this.setData({
['list[' + item.id + '].isChoose']: true
})
} else {
this.setData({
['list[' + item.id + '].isChoose']: false
})
}
})
},
网友评论