小程序中点击给当前添加active的选中样式

最新推荐文章于 2024-03-07 06:40:13 发布

我不是你不是我

最新推荐文章于 2024-03-07 06:40:13 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签：小程序 css 前端

本文链接：https://blog.csdn.net/weixin_46511008/article/details/126233343

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在微信小程序中为列表添加选中样式。通过在wxml文件中使用wx:for和wx:key指令，结合data属性传递当前选中项，再利用wxss设置选中状态的样式，实现点击切换不同类型的背景颜色。同时，js文件中定义了typeChange方法处理点击事件，更新选中项并触发自定义事件。

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

1、在小程序中给一个列表加一个选中样式，效果如下：

在这里插入图片描述

2、wxml 文件

（1）data-item 是用来传当前位置的，必须要写：

<!-- 切换年、月、周、日 -->
<view class="time-type">
    <view class="type {{activeItem == item.typeId ? 'active' : ''}}" wx:for="{{type}}" wx:key="index" bindtap="typeChange" data-type="{{item.time}}" data-typeId="{{item.typeId}}">
        {{item.name}}
    </view>
</view>

3、wxss 文件

（1）选中样式可自定义

/* 在这里做切换点击状态的样式 */
.time-type .active {
    background-color: #ff6700;
}

4、js 文件

（1）要看清楚数据格式：

Component({
    /**
     * 组件的初始数据
     */
    data: {
        activeItem: 0,
        type: [
            { typeId: 0, name: "日", time: "DAY" },
            { typeId: 1, name: "周", time: "WEEK" },
            { typeId: 2, name: "月", time: "MONTH" },
            { typeId: 3, name: "年", time: "YEAR" }
        ],
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 绑定事件
        typeChange(e) {
            var type = e.target.dataset.type;
            var typeid = e.target.dataset.typeid;
            this.setData({ activeItem: typeid });
            let eventDetail = {
                type: type,
            };
            this.triggerEvent("getChangeType", eventDetail);
        },
    }
})