• 针对小程序for循环绑定数据,实现toggle切换效果(交流QQ群:604788754)


    如有更好的方法实现,可以留言或加群交流学习。谢谢(交流QQ群:604788754)

    WXML:

    <block wx:for="{{datanum}}" wx:for-index="idx" wx:for-item='item'>
      <view class="classname" id="{{idx}}" bindtap="curchange">
        <view class="boxs">{{item.datas}}</view>
        <view wx:if="{{item.toggle==true}}" class="boxs">{{idx}}</view>
      </view>
    </block>
    

     WXSS:

    .classname{
      background-color: red;
       200px;
      margin-top: 50px;
    }
    .boxs{
       100px;
      height: 50px;
      background-color: #188eee;
      line-height: 50px;
      text-align: center;
      color: #fff;
      margin-bottom: 10px;
    }
    

     JS:

    Page({
      data:{
        datanum:[
          { datas:11 },
          { datas: 22 },
          { datas: 333 }
        ]
      },
      onLoad:function(){
        var datanum=this.data.datanum;
        for (var i = 0; i < datanum.length; i++) {
           datanum[i]['toggle'] = false;  //添加toggle 属性  
         };
         this.setData({
           datanum: datanum
         });
      },
      curchange:function(event){
        var id = event.currentTarget.id;
        var toggle = this.data.datanum[id]['toggle'];
        if(toggle==false){
          this.data.datanum[id]['toggle'] = true;
        }else{
          this.data.datanum[id]['toggle'] = false;
        };
        this.setData({
          datanum: this.data.datanum
        });
      }
    });
    

     效果图如下:

  • 相关阅读:
    VSCode
    git CAPTCHA required
    css :active
    节流 防抖
    判断数据类型
    http协议的三次握手和四次挥手
    http协议
    发布网站相关信息
    获取任意两个数之间多个随机数的方法;
    数组中的12个方法;
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7058871.html
Copyright © 2020-2023  润新知