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

  • 相关阅读:
    zbb20181207 springboot @ConfigurationProperties使用
    zbb20181206 logback,lombok 默认日志logback配置解析
    Spring Boot (8) 全局异常处理
    Spring Boot (7) JdbcTemplate访问数据库
    Spring Boot (6) Spring Data JPA
    Spring Boot (4) 静态页面和Thymeleaf模板
    Spring Boot (3) 热部署devtools
    Spring Boot (2) Restful风格接口
    Spring Boot (1) 构建第一个Spring Boot工程
    idea使用maven搭建ssm框架实现登陆商品增删改查
  • 原文地址:https://www.cnblogs.com/jvziking/p/8462310.html
Copyright © 2011-2022 走看看