微信小程序 wxs的簡單應用

 

Demo地址:微信小程序wxs的簡單應用

 

案例分析

張3、李4、王五，各自分別都有數量不等的車，如今須要列表顯示名字及他們擁有車的數量，

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的簡單應用