• 小程序双重for循环实现tab切换小demo


    wxml

    <!--pages/test/test.wxml-->
    <block wx:for="{{a}}" wx:for-index="father_index" wx:for-item="father_item">
    
      <view data-index="{{father_index}}">
    
        <block wx:for="{{father_item}}" wx:for-index="son_index" wx:for-item="son_item">
    
          <input type="text" wx:if="{{son_item.value!=undefined}}" value="{{son_item.value+father_index+son_index}}" data-index="{{father_index}}" 
          data-len="{{father_item.length}}"
           bindtap="clickHandle" data-son="{{son_index}}" wx:key="{{index}}"
          class="{{son_index == a[father_index][father_item.length - 1].flag?'active':''}}"
          />
        
         
        </block>
    
      </view>
    </block>
    
    

    js

    // pages/test/test.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        a: [
    
          [{ value: "a" }, { value: "b" }, { value: "c" }],
    
          [{ value: "d" }, { value: "e" }, { value: "f" }],
    
          [{ value: "g" }, { value: "h" }, { value: "i" }]
    
        ]
      },
      clickHandle(e){
      // console.log(e)
      let parentIndex = e.currentTarget.dataset.index
      let sonIndex = e.currentTarget.dataset.son
      let len = e.currentTarget.dataset.len
      console.log(e)
        this.data.a[parentIndex][len - 1].flag = sonIndex
        console.log( this.data.a)
        let bb = this.data.a
        this.setData({
          a:bb
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let A = this.data.a;
    A.map(el=>{
          return el.push({flag:0})
        })
        console.log(A,'B')
        this.setData({
          a:A
        })
       
        console.log(this.data.a,'jjj')
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    
    

    wxss

    /* pages/test/test.wxss */
    .active{
      color: red;
    }
    

    效果

  • 相关阅读:
    SVG:中国地图
    网页编程工具:EditPlus
    js插件
    html: 仿制soundmanager2右上角面板
    代码:页面布局(含图片列表布局)
    写着玩: 图片 圆盘
    表格
    按钮
    插件:左侧下拉菜单
    颜色
  • 原文地址:https://www.cnblogs.com/loveliang/p/13904740.html
Copyright © 2020-2023  润新知