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

最新推荐文章于 2024-09-30 12:58:13 发布

代码对我眨眼睛

最新推荐文章于 2024-09-30 12:58:13 发布

阅读量1.5k

点赞数 20

分类专栏： # 微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_73756108/article/details/136057433

版权

微信小程序专栏收录该内容

66 篇文章 19 订阅

订阅专栏

注释很详细，直接上代码

新增内容：

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
        })
    }
})