微信小程序页面中不能使用toString().indexOf()

最新推荐文章于 2025-06-23 12:30:00 发布

原创最新推荐文章于 2025-06-23 12:30:00 发布 · 1.3w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序踩坑

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

11 篇文章

订阅专栏

本文介绍了一种在小程序中实现多选按钮的方法，通过构造对象数组来管理不同的选择状态，如年代、类型和平台等，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序的mastache语法不支持js的方法。
即在页面标签中，使用以下js方法无效：

Object.keys()   toString()  indexOf()

在页面中，如果需要同时选中多个按钮，可构造对象数组处理，代码如下：

 data = {
        currentTab: 0,
        filterData: {
            'date': [{color:true,name:'全部'}, {color:false,name:'古代'}, {color:false,name:'近代'}, {color:false,name:'现代'}],
            'type':[{color:true,name:'全部'},{color:true,name:'悬疑'},{color:false,name:'古装'},{color:true,name:'搞笑'},{color:true,name:'科幻'},
                {color:true,name:'犯罪'},{color:true,name:'恐怖'},{color:false,name:'青春'},{color:true,name:'喜剧'}],
            'platform': [{color:true,name:'全部'}, {color:false,name:'爱奇艺'}, {color:false,name:'腾讯'}, {color:false,name:'优酷'}],
        },
        filterKeys:['date','type','platform']
    };

<block wx:for="{{filterKeys}}" wx:for-item="type" wx:key="type">
            <view style="border: 1px solid black; display:flex;">
                <block wx:for="{{filterData[type]}}" wx:for-item="item" wx:key="item" >
                    <view class="{{item.color?'styls1':''}}" style="padding:5rpx;" bindtap="selectType('{{[type,index]}}')">
                       {{item.name}}
                    </view>
                </block>
            </view>
        </block>

methods = {
        selectType (value) {
            let level1 = value[0];
            let level2 = value[1];
                if (level2 === 0) { // 点击全部 其他为false
                    this.filterData[level1][level2].color = true;
                    for (let i = 1; i < this.filterData[level1].length; i++) {   // 其他都为假
                        this.filterData[level1][i].color = false;
                    }
                } else {
                    this.filterData[level1][0].color = false;
                    this.filterData[level1][level2].color = !this.filterData[level1][level2].color;
                }
            this.$apply();
        },
    };

解决问题：页面上操作按钮：年代，类型，平台可以多选。
效果图：
在这里插入图片描述