微信小程序（三十七）选项点击高亮效果

注释很详细，直接上代码

上一篇

新增内容：

1.选择性渲染类

2.以数字为需渲染内容（数量）

源码：

index.wxml

<view class="Area">
    <!-- {
   {activeNum===index?'Active':''}}是选择性添加类名进行渲染 -->
    <view wx:for="{
    {4}}" wx:key="*this" bind:tap="onClick" mark:index="{
    {index}}" class="List {
    {activeNum===index?'Active':''}}">
            {
  {item}}
    </view>
</view>

index.wxss

page{
   
    background-color: floralwhite;
}

.Area{
   
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.List{
   
    text-align: center;
    margin: 10rpx 0rpx;
    padding: 20rpx 160rpx;
    background-color: gray;
    border-radius: 30rpx;
}

.Active{
   
    background-color: pink;
}

index.js

Page({
   
    data:{
   
        activeNum:0
    },

    onClick(e){
   
        //解构参数
        const {
   index}=e.mark

        this.setData({
   //参数赋值
            activeNum:index
        })
    }
})

效果演示：