【微信小程序】动态改变循环按钮的样式

最新推荐文章于 2023-08-05 18:28:45 发布

牛哞哞杂记

最新推荐文章于 2023-08-05 18:28:45 发布

阅读量1.2k

点赞数

分类专栏：小程序

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_40558766/article/details/104184075

版权

小程序专栏收录该内容

59 篇文章 8 订阅

订阅专栏

需要做出的效果：
在这里插入图片描述
总之，需要做出的效果是，在循环显示的按钮中，我单独点击一个按钮，这个按钮的颜色会改变

思路：
获取循环的下标，再通过下标去修改按钮的颜色

代码：

  <!-- index.wxml -->
  <view class="{{current_score === index?'clicked':'score'}}"  data-key='{{index}}'>
    <text>查看得分</text>
  </view>

/*** index.js*/
 score: function(e) {
    let that = this;
    let index= e.currentTarget.dataset.key;//获取index值
    console.log("得分："+index)
    that.setData({
      current_score: index
    })
  },

/* index.wxss */
.clicked {
  width: 335rpx;
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  color: #fcb216;
  background-color: rgba(245, 174, 21, 0.3);
}

.score {
  width: 335rpx;
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  color: #fcb216;
  background-color: #fff5df;
}

总结：
在 js 里通过 e.currentTarget.dataset.key 获取到下标后，接下来在wxml里 data-key=’{{index}}’ 获取下标，再通过 current_score === index?‘clicked’:‘score’ 去判断当点击时，就改变按钮的颜色，当然若要改变成其他样式，在样式文件（wxss）里直接修改即可。