微信小程序动态循环选项卡及选项卡内容

后台获取多维数组,小程序动态循环实现选项卡
数据格式如下:
在这里插入图片描述
实现效果:
在这里插入图片描述
废话不多说,直接上代码:

//这里是循环选项卡
<view class="navbar">
  <view wx:for="{{allarrm}}" wx:key='{{index}}' data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}"
    wx:for-item='itemaa' bindtap="navbarTap">
    <text>{{itemaa.fName}}</text>
  </view>
</view>
<view>
//这里是循环原数组,但是取值为原数组中的det
  <view wx:for-items="{{allarrm}}" wx:for-item='itemaa' wx:key='{{index}}' data-idx="{{index}}">
    <!-- <view wx:for="{{navbar}}" data-idx="{{index}}"class="item {{currentTab==indexs ? 'show': 'hide'}}">
      <view hidden="{{currentTab!==index}}"></view> -->
    <view hidden="{{currentTab!==index}}" data-id="{{index}}" class="scanning" bindtap="scanCode">
      <image src="../../../imgs/scan.png"></image>
      <text>扫一扫</text>
    </view>
    <scroll-view hidden="{{currentTab!==index}}" scroll-y="true" style="height: 500rpx;">
      <view wx:for-items="{{allarrm[index].detmain}}" wx:key="{{wxId}}" data-ddid="{{index}}">
        <view class="detaillist">
          <view class="table">
            <!-- <view class="tr" wx:for="{{parmsupCont}}"> -->
            <view class="td" class="ordername">{{item.valueName}}</view>
            <!-- <view class="td" class="ordernum">{{arrRelNum[currentTab][index]}}</view> -->
            <view class="td" class="ordernum">{{item.RekNum}}</view>
            <view class="num-subtraction" catchtap="neckSubm" data-index='{{index}}'>-</view>
            <!-- <view class="td" class="orderprice">{{item.RelNum}}</view> -->
            <view class="td"
              class="{{item.RelNum == parmsCont[currentTab][index].RelNum ? 'orderprice' : 'orderprice-two'}}">
              {{item.RelNum}}</view>
            <view class="num-add" catchtap="neckAddm" data-index='{{index}}'>+</view>
            <!-- </view> -->
          </view>
        </view>
      </view>
    </scroll-view>
</view>
<view hidden="{{currentTab!==index}}" wx:for="{{allarrm}}" wx:key='{{index}}' data-id="{{index}}">
  <view class="allbut1" id="{{index}}" wx:if="{{allarrm[index].upor==false}}">
    <view bindtap="up" class='but1'>上传数据</view>
  </view>
  <view class="allbut1" id="{{index}}" wx:if="{{allarrm[index].upor==true}}">
    <view class='but1'>数据已上传</view>
  </view>
  <view class="allbut1" id="{{index}}" wx:if="{{upName==true}}">
    <view bindtap="goName" class='but1'>填写姓名</view>
  </view>

</view>

取值的问题 that.data.currentTab区分选项卡,e.target.dataset.index区分循环的数组中的哪个值。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值