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

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

相关推荐
Jun2812 小时前
微信小程序初探之数据绑定
微信小程序
顾辰逸you2 小时前
uniapp--咸虾米壁纸(三)
前端·微信小程序
大包子4 小时前
小程序分享(下载)海报随记
微信小程序
996幸存者5 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
diygwcom8 小时前
AI实现超级客户端打印 支持APP 网页 小程序 调用本地客户端打印
小程序
zkmall9 小时前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范
源码哥_博纳软云9 小时前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
顾辰逸you10 小时前
uniapp--咸虾米壁纸项目(二)
前端·微信小程序
CRMEB定制开发19 小时前
CRMEB私域电商系统后台开发实战:小程序配置全流程解析
小程序·开源软件·小程序商城·商城源码·微信商城·crmeb
Burt19 小时前
#🎉 unibest 3.11了!快来看看新增了啥~
微信小程序·uni-app