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

使用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_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷5 小时前
第一个小程序
小程序
春哥的研究所5 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld5 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点7 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖11 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发12 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°14 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero15 小时前
微信小程序91~100
微信小程序·小程序