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

wxs文件的位置如图

 

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

  
    搜索观察记录条目
    搜索
  
  共有{{report.totalNumber}}条观察记录

  
    {{key}}
          
      
        {{item.recordDate}}
        
          
        
        {{item.content}}
        {{item.indicatorName}}
            
    
  

// 支持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;}