微信小程序 for循環 wx:for和wx:if wx:elif嵌套着使用

 

 

<view class='Mall_title'>
    <block wx:for="{{mall_title_object}}" wx:key="{{index}}">
      <view class="h_item {{num==index?'current':''}}" catchtap='switchTab' data-index="{{index}}">
        <text>{{item}}</text>
        <view class='b_line'></view>
      </view> 
    </block>
  </view>
  <view wx:if="{{curIndex==1}}" class='con_bottom'>
    <block wx:for="{{class_object}}" wx:key="{{index}}">
    <navigator url='{{item.class_url}}'>
      <view class='b_class'>
        <image src='../../images/class_img.png' style='width:166rpx;height:166rpx;margin-right:20rpx;'></image>
        <view class='class_detail'>
          <text class='class_name'>{{item.class_title}}</text>
          <text>{{item.class_name}}</text>
          <text>{{item.class_time}}</text>
        </view>
        <view class='teacher_name'>
          <text>{{item.class_teacher}}</text>
          <text>{{item.class_kd}}</text>
        </view>
      </view>
    </navigator>
    </block> 
  </view>
  <view class='jf_list' wx:elif="{{goods_object[curIndex]}}">
    <block wx:for="{{goods_object[curIndex]}}" wx:key="{{index}}">
    <navigator url='{{item.jf_url}}'>
      <view class='goods_list'>
        <image src='{{item.goods_img}}'></image>
        <view>{{item.goods_name}}</view>
        <view>{{item.goods_jf}}：<text>{{item.goods_price}}</text></view>
      </view>
    </navigator>
    </block>
  </view>

js:

mall_title_object:["積分商城","虛擬商品","實物商品"], class_object: [ { class_title: "Hiphop", class_name: "共7課時", class_time: "明天-17:45-18:45", class_teacher: "趙衛斌", class_kd: "¥200", class_url: "../course_goods/course_goods" }, { class_title: "Hiphop", class_name: "共7課時", class_time: "明天-17:45-18:45", class_teacher: "趙衛斌", class_kd: "¥200", class_url:"../course_goods/course_goods" }, { class_title: "Hiphop", class_name: "共7課時", class_time: "明天-17:45-18:45", class_teacher: "趙衛斌", class_kd: "¥200", class_url: "../course_goods/course_goods" } ], goods_object:[ [ { goods_img:"../../images/mall1.png", goods_name:"圓領加絨大衣", goods_jf:"商品積分", goods_price:"8000", jf_url:"../jfgoods/jfgoods" }, { goods_img: "../../images/mall2.png", goods_name: "圓領加絨大衣", goods_jf: "商品積分", goods_price: "8000", jf_url: "../jfgoods/jfgoods" }, { goods_img: "../../images/mall1.png", goods_name: "圓領加絨大衣", goods_jf: "商品積分", goods_price: "8000", jf_url: "../jfgoods/jfgoods" }, { goods_img: "../../images/mall2.png", goods_name: "圓領加絨大衣", goods_jf: "商品積分", goods_price: "8000", jf_url: "../jfgoods/jfgoods" } ], [], [ { goods_img: "../../images/mall1.png", goods_name: "圓領加絨大衣", goods_jf: "商品價格", goods_price: "¥8000", jf_url:"../actual_goods/actual_goods" }, { goods_img: "../../images/mall2.png", goods_name: "圓領加絨大衣", goods_jf: "商品價格", goods_price: "¥8000", jf_url: "../actual_goods/actual_goods" }, { goods_img: "../../images/mall1.png", goods_name: "圓領加絨大衣", goods_jf: "商品價格", goods_price: "¥8000", jf_url: "../actual_goods/actual_goods" }, { goods_img: "../../images/mall2.png", goods_name: "圓領加絨大衣", goods_jf: "商品價格", goods_price: "¥8000", jf_url: "../actual_goods/actual_goods" } ] ], switchTab: function (e) { let index = parseInt(e.currentTarget.dataset.index), num = parseInt(e.currentTarget.dataset.index), curIndex = parseInt(e.currentTarget.dataset.index) // console.log(curIndex)
        var that = this
        this.setData({ curIndex: index, num: index }) },

 參考：https://www.cnblogs.com/lijuntao/p/7151234.html