微信小程序调用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.userInfoutil.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;}