小程序 - 手风琴折叠效果

本文介绍小程序中如何通过wx:for实现列表渲染,并利用data-index和setData方法来控制列表项的状态变化,包括如何通过简单的三元运算实现动态样式绑定。

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

这里写图片描述

<view class="helper-box">
    // for循环
   <block wx:for="{{helperMain}}" wx:key="index">
        // 是根据数据动态生成的. 所以也需要列表渲染. 
        // {{selectedFlag[index]?"weui-cell-rot":""}}" 数据绑定是可以进行简单的 “ 三元运算 文档-数据绑定 ”,
        // 如果selectedFlag[index]为true,则动态添加class类 

       <view class="{{selectedFlag[index]?'weui-cell-rot':''}}" data-index="{{index}}" bindtap="changeToggle">
            <view class="weui-cell weui-cell-access">
                <view class="weui-cell-bd">{{item.title}}</view>
                <view class="weui-cell-ft"></view>
            </view>
            <view class="text-box">{{item.text}}</view>
       </view>
       // 改:data-index会拿到循环中每个对应的id值
       <view class='item-box  backg-white {{status === index ?"weui-cell-rot":""}}' data-index='{{index}}' data-status='{{status}}' bindtap="changeToggle">
       		...
       </view>
       
   </block>
</view>
		
1、this.data更改的是js中的数据;that.setData相当于通知原生view层的数据更新。
2、因为小程序采用MVVM,使用setData将数据从逻辑层推到视图层显示,会节省很多工作。

*注:在app.json中配置的属性会被子window的属性所覆盖。

page({
  data: {
    helperMain: [
        {
            index: "0", // 当前选中的栏id
            title: "为什么获取不到个人头像?",
            text: "第一次授权是为了获取用户的个人信息,如果用户拒绝授权就会引起数据显示不正常。"
        }
    ],
        selectedFlag: [false,false,false],
  },
    changeToggle: function(e) {
        var index = e.currentTarget.dataset.index;
        if (this.data.selectedFlag[index]) {
            this.data.selectedFlag[index] = false;
        } else {
            this.data.selectedFlag[index] = true;
        }
        this.setData({
            selectedFlag: this.data.selectedFlag
        })
    }
}) 
                                                |---分割线---|
                                                |            |
-------------------------------------------------            -------------------
data: {
  status: '',
}
changeToggle: function(e) {
  var that = this
  var index = e.currentTarget.dataset.index,
      status = e.currentTarget.dataset.status;
  that.setData({
    //重新设置data里面的"status"的值
    'status' : ( status === index ? '' : index )
  })
  // 在 wepy框架下that.setData可直接用this替代
}

// 

3、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息
4、( status === index ? '' : index ): 判断status 的值是否恒等index,不等于则传入index值给status。
5、e.currentTarget 代表的是,注册了监听点击事件的组件;e.target代表的是实际触发了点击事件的组件。

效果图:
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值