zoukankan      html  css  js  c++  java
  • 小程序双重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;
    }
    

    效果

  • 相关阅读:
    算法
    Unity-UI
    lua-设计与实现 1类型
    Unity-Cache Server
    lua-高效编程-总结
    算法-JPS寻路设计思想
    数据结构- List、Dictionary
    数据结构-二叉树、堆
    VSCode更好用
    功能快捷键
  • 原文地址:https://www.cnblogs.com/loveliang/p/13904740.html
Copyright © 2011-2022 走看看