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

使用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

相关推荐
2501_915921434 小时前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者84 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_915106324 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
游戏开发爱好者87 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
abigale039 小时前
开发实战 - ego商城 - 补充:小程序性能优化
小程序·uniapp·小程序分包
说私域10 小时前
开源AI智能客服、AI智能名片与S2B2C商城小程序融合下的商家客服能力提升策略研究
人工智能·小程序
赣州云智科技的技术铺子11 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验
微信小程序·小程序·云开发·智能小程序
游戏开发爱好者815 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088921 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
liweiweili1261 天前
驾校陪练下单小程序
小程序