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

使用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_9160074712 分钟前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918413 小时前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发4 小时前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php
七七软件开发4 小时前
打车小程序 app 系统架构分析
java·python·小程序·系统架构·交友
换日线°14 小时前
css 不错的按钮动画
前端·css·微信小程序
说私域15 小时前
从渠道渗透到圈层渗透:开源链动2+1模式、AI智能名片与S2B2C商城小程序的协同创新路径研究
人工智能·小程序·开源
qq_4275060816 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
gongzemin1 天前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express
猫头_1 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app