美文网首页
微信小程序tab切换(动态修改data里数组的值)

微信小程序tab切换(动态修改data里数组的值)

作者: xsmile21 | 来源:发表于2022-07-26 15:22 被阅读0次

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
       })
     }
   })
},

相关文章

网友评论

      本文标题:微信小程序tab切换(动态修改data里数组的值)

      本文链接:https://www.haomeiwen.com/subject/zapoirtx.html