微信小程序开发22__在列表中高亮选中某一项

109905418

已于 2023-07-09 21:52:46 修改

阅读量248

点赞数 2

分类专栏：小程序基础文章标签：微信小程序 notepad++ 小程序

于 2023-07-08 21:51:25 首次发布

本文链接：https://blog.csdn.net/aduovip/article/details/131616946

版权

小程序基础专栏收录该内容

23 篇文章 4 订阅

订阅专栏

通过在WXML中使用数据绑定和条件类来切换高亮状态，结合JS处理点击事件更新选中项，可以实现在列表中高亮显示被选中的某一项。示例代码展示了如何在列表中通过数据索引实现这一功能，当选中某项时，将其设置为红色并增加内边距，否则保持蓝色默认样式。

摘要由CSDN通过智能技术生成

思考一个问题: 在一个列表中，怎样实现高亮选中某一项呢?

我们先看要实现的效果图

相应的wxml页面，gaoliang.wxml

<!-- 这里data-index 用于点击时传递参数, 在js取时写法： e.target.dataset.index -->
<view wx:for="{{info}}" class="{{index==num?'active':'unclick'}}" bindtap="light"
data-index="{{index}}"
>{{item}}</view>

样式文件 gaoliang.wxss

.active {
  color:red;
  padding-top: 20px;
  padding-left: 30px;
  
}

.unclick{
  color: blue;
  padding-top: 20px;
  padding-left: 30px;
}

然后看 gaoliang.js

  data: {
    info: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
    num: -1, //上次选中星期几的 序号
  },
  onLoad(options) {
  },
  light(e){
    this.setData({num: e.target.dataset.index});
  },