【微信小程序】列表渲染，点击切换样式

做一个有趣的妞儿

于 2022-10-08 15:19:27 发布

阅读量555

点赞数

分类专栏： P1.日常练手demo 文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/qq_40320447/article/details/127209479

版权

P1.日常练手demo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

WXML
<!-- list,点击文字高亮，切换样式 -->
<view wx:for="{{items}}" wx:key="i" bindtap="changeColor" data-index="{{index}}" class="{{index==num?'active':''}}" >
{{index}}:{{item}}
</view>

WXSS
.active{
  text-align: center;
  padding: 6rpx;
  color: blue;
  background-color: rgb(241, 240, 227);
  width: 200rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;
}

JS
/**
   * 点击文字高亮
   */
  changeColor(e){
    console.log(e.target.dataset.index);
    this.setData({
      num:e.target.dataset.index
    });
  }