微信小程序下拉加载更多实现

使用scroll-view实现

代码

前端

html 复制代码
<scroll-view class="scrollarea" scroll-y type="list" 	bindscrolltolower='loadMore'>
  <view wx:for="{{list}}" class="item" wx:key="index">
    {{index+1}}
  </view>
</scroll-view>

样式

css 复制代码
page {
  width: 100%;
  height: 100%;
}

.scrollarea {
  width: 100%;
  height: 100%;
}

.item {
  font-size: 40rpx;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  width: 100%;
  border-bottom: 2rpx solid #ccc;
}

js逻辑

js 复制代码
// index.js
Page({
  data: {
    //每页展示的数据
    size: 15,
    //页码
    page: 1,
    //总数量
    total: 0,
    list: [],
    //是否正在加载数据
    isLoadMore: false
  },
  onLoad() {
    //模拟请求数据,第一次数据尽量占满屏幕
    this.setData({
      total: 100,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    })
  },
  loadMore() {
    if (((this.data.page - 1) * this.data.size) >= this.data.total) {
      //没有更多数据
      return;
    }
    if (this.data.isLoadMore) {
      return;
    }
    this.setData({
      isLoadMore: true
    }, () => {
      wx.showNavigationBarLoading()
    })
    let newData = this.data.list.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
    if (newData.length > this.data.total) {
      newData = newData.splice(0, this.data.total)
    }
    this.setData({
      list: newData
    })
    setTimeout(() => {
      this.setData({
        isLoadMore: false
      }, () => {
        wx.hideNavigationBarLoading()
      })
    }, 1000);
  }
})

效果

原理

监听scroll-view的触底事件(bindscrolltolower),然后触发加载,根据总数量判断是否存在更多,存在则加载,scroll-view也支持自定义距离底部多少触发触底事件,属性是 lower-threshold,默认50

链接:https://pan.quark.cn/s/9abb450b2a94

提取码:B9he

相关推荐
今日热点1 分钟前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖4 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发5 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°8 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero8 小时前
微信小程序91~100
微信小程序·小程序
高压锅_12208 小时前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_805962938 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor14 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由1 天前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++