Simple application of micro letter applet wxs

 

Demo Address: simple application of micro letter applet wxs

 

case analysis

John Doe, Wang Wu, respectively, each have a different number of cars, now need to display a list of the names and the number of cars they have,

list data structure is as follows, when we use wx: time for displaying found objects personal vehicle which contains an array of objects,

We find good real names, but the number of vehicles is not convenient to statistics, this time can be a good solution to use wxs

list: [{
        id: 1,
        name: "Joe Smith" ,
        cars: [{
            id: 1,
            name: 'Mercedes'
          },
          ......
        ]
      },
      ......]

 

// 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) {
        were 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>

// The index.js data follows the list 
data: {
    list: [{
        id: 1,
        name: "Joe Smith" ,
        cars: [{
            id: 1,
            name: 'Mercedes'
          },
          {
            id: 2,
            name: 'BMW'
          }
        ]
      },
      {
        id: 2,
        name: 'John Doe' ,
        cars: [{
            id: 3,
            name: 'Cadillac'
          },
          {
            id: 4,
            name: 'Infiniti'
          },
          {
            id: 5,
            name: "Mazda"
          }
        ]
      },
      {
        id: 3,
        name: 'King of Five' ,
        cars: [{
          id: 6,
          name: 'Fit'
        }]
      }
    ]
  },

 

 

 

Demo Address: simple application of micro letter applet wxs