zoukankan      html  css  js  c++  java
  • 微信小程序 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='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

  • 相关阅读:
    RUNOOB.COM-python网络编程-(python3.5.0)
    windows查看服务
    计算机网络里的一些理解
    如果面试有傻逼问道oracle怎么启动的
    推荐一个学习数据库的地方
    电脑中的驱动程序是什么,是干什么的
    Raspberry Pi 4B 之 Python开发
    Ubuntu20.04+EdgexFoundry边缘计算微服务搭建-----遇到的问题-----make build 被墙问题
    Raspberry Pi 4B + Ubuntu 20.04 server for arm64 的wifi配置
    关于PicoNeo开发环境的Unity3D+AndroidSDK配置
  • 原文地址:https://www.cnblogs.com/jvziking/p/8462310.html
Copyright © 2011-2022 走看看