json文件

{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }

wxml文件

<recycle-view batch="{{batchSetRecycleData}}" id="recycleId" bindscrolltolower="scrolltolowerFun">
  <view slot="before" style="text-align: center">长列表前面的内容</view>
  <recycle-item wx:for="{{recycleList}}" wx:key="id" class="item {{item.idx}}">
    <view class="item-content">
      <text>{{item.title}}</text>
      <image src="{{item.image_url}}" mode="aspectFit" style="height: 100px; width: 240px"></image>
    </view>
  </recycle-item>
  <view slot="after" style="text-align: center">长列表后面的内容</view>
</recycle-view>

wxss文件

.item+.item {
  /* border-top: 1px solid #ccc; */
}

.item, .item > view {
  display: flex;
  align-items: center;
  height: 150px;
  width: 100%;
}
.item-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 150px;
  align-items: center;
}
/* .wrap {
  height: 100% !important;
} */
/* .wx-recycle-item {
  width: 100%;
} */

js文件

const createRecycleContext = require('miniprogram-recycle-view')

// fakeList

const imgUrlList = [
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSFrhQolODuh9lGqFKoicqKGxweRdS2zzibxicBMYkTic4WCJrbBNqoMchCWf02UbOvMBI6d32TAKFuqTQ/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T0MfAGwtAs4jz0vTC0PHJEv2UErsjBhNDNujSwLhy7icf0DjDe7BYSIFkwqpMbekcwKDBic0ygBoFtw/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGrMuuicv6QLQAe74FH1KrGUOq8VMe3Ya63tiaqaMNQibvB4T3SLoEWV3WrMvlySd3NXRXJGG75LAtjA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9Zolu6XnibTXNaZ1c19RozKjLqmR4oWl3DZhpLcDzwmtMOmIOuNuricrNA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9ZhibT6gPEoZfiaRGy9w9QyWB2vtOkxYUJPcEjePQTrVYpRF0PqicC4EEvw/0?wx_fmt=jpeg'

]

let newList = new Array(100).fill(0)
let count = 0
let page=1;
for (let i = 0; i < newList.length; i++) {
  newList[i] = {
    idx: i,
    title: `${i}、文本`,
    image_url: imgUrlList[(count++) % imgUrlList.length],
  }
}

const rpx2px = (rpx) => (rpx / 750) * wx.getSystemInfoSync().windowWidth
Page({
  onShareAppMessage() {
    return {
      title: 'recycle-view',
      path: 'packageExtend/pages/extend/recycle-view/recycle-view'
    }
  },
  data: {

  },
  onLoad() {

  },
  onReady() {
    this.ctx = createRecycleContext({
      id: 'recycleId',
      dataKey: 'recycleList',
      page: this,
      itemSize: {
        height: rpx2px(500),
        width: rpx2px(750)
      }
    })
    this.ctx.append(newList)
    console.log(this.ctx.getScrollTop())
  },
  scrolltolowerFun(){
    let list = new Array(100).fill(0)
      let count = page*100
      console.log(count)
      for (let i = 0; i < list.length; i++) {
        list[i] = {
          idx: i+count,
          title: `${i+count}、文本`,
          image_url: imgUrlList[(count+1) % imgUrlList.length],
        }
      }
      page++
    console.log('到底部了')
    newList=[...newList,...list]
    console.log(newList)
    
    this.ctx.append(list)
  }

})