微信小程序调用map数据并在wxml中对数组进行截取的操作

wxs文件的位置如图

实现数组截取只保留五张图片

<wxs module="filter" src="./slicefunc.wxs"></wxs>
<view class="wrap">
  <view class="search-box" bindtap="toSearch">
    <view class="v1">搜索观察记录条目</view>
    <view class="v2">搜索</view>
  </view>
  <view class="record-number">共有{{report.totalNumber}}条观察记录</view>

  <view class="white-box" wx:for="{{report.recordDatas}}" wx:key="key" wx:for-index="key" wx:for-item="group">
    <view class="time">{{key}}</view>
    <view class="item">      
      <view class="record-list" wx:for="{{group}}" wx:key="id">
        <view class="v1">{{item.recordDate}}</view>
        <view class="record-student">
          <image mode="aspectFill" class="record-student-photo" wx:for="{{filter.sliceFunc(item.participants)}}" wx:for-item="mItem" wx:for-index="mIndex" wx:key="studentId" src="{{mItem.studentImage}}" />
        </view>
        <view class="record-txt">{{item.content}}</view>
        <view class="record-exercise">{{item.indicatorName}}</view>
      </view>      
    </view>
  </view>

</view>

// 支持es4语法
var filter = {
  sliceFunc: function(list){
      return list.slice(0,5)
  }
}
// 导出对外暴露的属性
module.exports = {
  sliceFunc: filter.sliceFunc
}

************这个是slicefunc.wxs里的内容是重点*****************************

以下的代码不重要只是记录用的

const app = getApp();
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
Page({
  data: {
    content: '',
    report: {}
  },

  onLoad(options) {},

  onShow() {
    const userInfo = wx.getStorageSync('userInfo');
    this.setData({
      userInfo
    })
    this.loadData()
  },

  loadData(){
    let oUserInfo = this.data.userInfo
    util.request(api.listObservationRecord + oUserInfo.userId + '&&content=' + this.data.content, '', 'get').then(res => {
      if (res.code == 200) {
        let odata = res.data       
        this.setData({
          report: odata
        })
      } else {
        wx.showModal({
          title: res.msg,
          icon: 'error',
          showCancel: false,
          duration: 3000
        });
      }
    });
  },

  toSearch(){
    wx.navigateTo({      
      url: '../recordsearch/recordsearch'      
    })
  },
})

.wrap{ padding: 20rpx 0 0 10rpx;}
.search-box{ padding-right: 10rpx; margin-bottom: 10rpx; display: flex; align-items: center;}
.search-box .v1{ padding-left: 20rpx; flex: 1; height: 66rpx; line-height: 66rpx; background: #fff; font-size: 24rpx; color: #808080; border: 1rpx solid #eee; border-radius: 10rpx;}
.search-box .v2{ margin-left: 10rpx; width: 88rpx; height: 66rpx; text-align: center; line-height: 66rpx; background: #169bd5; font-size: 26rpx; color: #fff; border-radius: 10rpx;}
.record-number{ margin-top: 20rpx; font-size: 26rpx; font-weight: bold; color: #333;}

.white-box{ margin-top: 22rpx; padding: 20rpx 20rpx 0 20rpx; width: 730rpx; box-sizing: border-box; background: #fff; border-radius: 25rpx;}
.time{ font-size: 26rpx; color: #015478;}
.item{ margin-top: 10rpx; display: flex; justify-content: space-between; flex-wrap: wrap;}
.record-list{ margin-bottom: 20rpx; padding: 20rpx; width: 335rpx; height: 225rpx; box-sizing: border-box; background: #f0f0f0;}
.record-list:last-child{ margin-right: 0;}
.record-list .v1{ margin-bottom: 10rpx; font-size: 24rpx; white-space: nowrap;}
.record-student{ display: flex; overflow-x: scroll;}
.record-student-photo{ margin-right: 10rpx; display: block; width: 50rpx; height: 50rpx; border-radius: 50%;}
.record-txt{ margin-top: 10rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;font-size: 24rpx; color: #999;}
.record-exercise{ margin-top: 10rpx; font-size: 24rpx; color: #027db4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}