在微信小程序中实现多选功能列表点击选中并且高亮显示，可以通过多种方式实现。以下是一些常见的方法：
方法一：使用复选框组件并自定义样式
微信小程序提供了复选框组件（checkbox）和复选框组（checkbox-group），但复选框的样式可能不满足所有需求。可以通过修改wxss样式文件来自定义复选框的样式。
方法二：使用数据绑定和样式类
WXML代码：
使用wx:for循环渲染列表项。
使用data-属性绑定每个列表项的索引或唯一标识。
绑定点击事件，并在事件处理函数中更改数据状态。
使用条件渲染（如class="{{data.select?'active':''}}"）根据数据状态应用样式类。
<view class="list">
<span class="{{item.select?'active':''}}" wx:for="{{lists}}" wx:key="index" id="{{index}}" bindtap="selectOne">{{item.name}}</span>
</view>
WXSS代码：
定义.active类以实现高亮效果。
.active {
background-color: rgb(134, 209, 157);
}
JS代码：
在页面的data中定义列表数据。
实现点击事件处理函数，更改对应列表项的select属性，并更新数据状态。
Page({
data: {
lists: [
{ name: 'list1', select: true },
{ name: 'list2', select: false },
// ...
]
},
selectOne: function(e) {
// 获取被点击元素的索引
const index = e.currentTarget.dataset.index;
// 复制一份 list 数组
const lists = this.data.lists;
// 重置所有项的 select 属性
lists.map(item => {
item.select = false;
});
// 设置被点击项的 select 属性为 true
lists[index].select = true;
// 更新数据
this.setData({ lists });
}
});
方法三：使用第三方组件库
可以使用第三方组件库中的复选框组件，如Vant Weapp库，这些组件库通常提供了丰富的样式和功能。
方法四：使用图片组件和条件渲染
通过条件渲染图片组件来显示复选框样式，根据数据状态（如checked属性）来显示选中或未选中的图片。
注意事项
在实现多选功能时，确保每个列表项都有唯一的标识（如id或index），以便在事件处理函数中准确找到并更新对应的数据项。
自定义样式时，注意样式的优先级和继承关系，避免样式冲突。
如果使用第三方组件库，请仔细阅读文档并按照要求引入和使用组件。