小程序，遍历数据，一页有4个数据，展示轮播图效果

本人新手，不要介意，命名不太规范，请不要吐槽也不要学习

自己写了一个繁琐点的，网上找了一个，一共两个方法

首先来一组数据

  data: {  
    arr:[
      { id: 1, tit: 'zxc1' },
      { id: 2, tit: 'zxc2' },
      { id: 3, tit: 'zxc3' },
      { id: 4, tit: 'zxc4' },
      { id: 5, tit: 'zxc5' },
      { id: 6, tit: 'zxc6' },
      { id: 7, tit: 'zxc7' },
      { id: 8, tit: 'zxc8' },
      { id: 9, tit: 'zxc9' }
    ]
  },

页面渲染展示（轮播图）

<view>
  <swiper indicator-dots="true"
          interval="2000" 
          duration="1000"
    >
    <block wx:for='{{newData}}' wx:key='{{index}}'>
      <swiper-item  style="display:flex;">
        <view wx:for='{{item}}' 
              wx:key='{{item.id}}' 
              wx:for-item='key' 
              style='margin:0 20rpx'
          >
          {{key.tit}}
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

js方面

方法一：

//  array  展示swiper的数组
//   size  每页展示数据的个数
swiper(array,size){
	//  定义好全局this指向
    let that = this
    //  获取数组长度
    var length = that.data.arr.length; 
    //  一共可以分为几页，ceil：取整，有小数点加一  例如：1.2  取  2
    var page = Math.ceil(length / size);  
 	//  创建一个新数组，存放截取后的数据
    var newData= []
    //  从第几个开始截取
    var start = 0

    for(var i=1;i<page;i++){
    //  i 指循环到第几页   i *  size  截取到第几个，页数 * 每页个数
      var newArr= arr.slice(start, i * size)
      //  放在新的数组中
      newData.push(newArr)
      //  查看余数
      var remainder= length - i*size
      //  下一次开始的下标，第二页应从下标为4开始
      start = i * size
    }
    //  判断余数是否大于每页展示个数
    if (remainder > size) {
      return
    } else {
    //  小于每页个数的话，直接截取到最后一个，再存到数组中，渲染到页面上
      var newArr= arr.slice(start, length )
      newData.push(newArr)
      that.setData({
        newData:newData
      })
    }
  },

方法二：
此函数可写在page外

function chunk(array, size) {
  const length = array.length
  //判断不是数组，或者size没有设置，size小于1，就返回空数组
  if (!length || !size || size < 1) {
    return []
  }
  //核心部分
  let index = 0 //用来表示切割元素的范围start
  let resIndex = 0 //用来递增表示输出数组的下标

  //根据length和size算出输出数组的长度，并且创建它。
  let result = new Array(Math.ceil(length / size))
  //进行循环
  while (index < length) {
    //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
    result[resIndex++] = array.slice(index, (index += size))
  }
  //输出新数组
  return result
}

调用方法：

  onLoad: function () {
  //  方法一调用
    this.swiper(this.data.arr, 4)
    //  方法二调用
    var newData = chunk(this.data.arr,4)
    this.setData({
      newData:newData
    })
  },

效果图：