• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序wxs的简单应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

Demo地址:微信小程序wxs的简单应用

 

案例分析

张三、李四、王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量,

list数据结构如下,当我们使用wx:for进行显示时,发现个人对象里面包含车辆对象数组,

我们发现人名好现实,但是车辆数量不方便统计,这时使用wxs就能很好的解决

list: [{
        id: 1,
        name: '张三',
        cars: [{
            id: 1,
            name: '奔驰'
          },
          ......
        ]
      },
      ......]

 

// index.wxml
<
view class="container"> <view wx:for="{{list}}" wx:key="id" class="list"> <view>姓名:{{item.name}}</view> <wxs module="m"> var getCarCount = function(array) { var count = 0; for (var i = 0; i < array.length; ++i) { count++; } return count; } module.exports.getCarCount = getCarCount; </wxs> <view class="gray-color">拥有{{m.getCarCount(item.cars)}}辆车</view> </view> </view>
// index.js的list数据如下
data: {
    list: [{
        id: 1,
        name: '张三',
        cars: [{
            id: 1,
            name: '奔驰'
          },
          {
            id: 2,
            name: '宝马'
          }
        ]
      },
      {
        id: 2,
        name: '李四',
        cars: [{
            id: 3,
            name: '卡迪拉克'
          },
          {
            id: 4,
            name: '英菲尼迪'
          },
          {
            id: 5,
            name: '马自达'
          }
        ]
      },
      {
        id: 3,
        name: '王五',
        cars: [{
          id: 6,
          name: '飞度'
        }]
      }
    ]
  },

 

 

 

Demo地址:微信小程序wxs的简单应用 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
垃圾分类小程序,云开发 (附源码)发布时间:2022-07-18
下一篇:
小程序中that和this的指向问题发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap