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

一、前情提要

  1. 微信小程序中实现上拉加载更多,其实就是pc端项目的分页。
  2. 使用的是scroll-view,scroll-view详情在微信开发文档/开发/组件/视图容器中。
  3. 每次上拉,就是在原有数据基础上,拼接/合并上本次上拉请求得到的数据。
  4. 这里采用的是concat,concat 是数组对象的一个方法,用于合并两个或多个数组,生成一个新的数组。这个方法不会修改原始数组,而是返回一个新的数组
  5. concat使用示例如下:
javascript 复制代码
// 示例数组
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

// 使用concat合并数组
const mergedArray = array1.concat(array2, array3);

// 打印结果
console.log("原始数组1: ", array1);
console.log("原始数组2: ", array2);
console.log("原始数组3: ", array3);
console.log("合并后的数组: ", mergedArray);

//输出结果应为:
原始数组1:  [1, 2, 3]
原始数组2:  [4, 5, 6]
原始数组3:  [7, 8, 9]
合并后的数组:  [1, 2, 3, 4, 5, 6, 7, 8, 9]

二、代码示例(1)不使用onReachBottom

  1. index.wxml
javascript 复制代码
//1、scroll-y 允许纵向滚动
//2、lower-threshold="100px" 距底部/右边多远(100px)时,触发 scrolltolower 事件
//3、scroll-top="{{topHeight}}px" 设置竖向滚动条位置
<view class="box">
	<!-- 列表 -->
	<scroll-view scroll-y lower-threshold="100px" bindscrolltolower="scrollToLower" style="height: 80vh;" scroll-top="{{topHeight}}px" class="scrView">
		<view class="listBox" wx:for="{{groupData}}" wx:key="id">
			<view class="name">{{item.name}}</view>
			<view class="phone">{{item.mobile}}</view>
			<image src="../../image/icon/bj.png" bindtap="editRecipient" data-item="{{item}}" class="mini-btn" />
			<image src="../../image/icon/sc.png" bindtap="deleteRecipient" data-id="{{item.id}}" class="mini-btn2" />
		</view>
		<view style="text-align: center;">
            <view wx:if="{{loading}}">加载中...</view>
            <view wx:if="{{noMore && !noData}}">没有更多了</view>
            <view wx:if="{{noData}}">暂无数据</view>
        </view>
	</scroll-view>
</view>
  1. index.js
javascript 复制代码
Page({
  data: {
   loading: false, //加载更多的loading
   noMore: false,   //没有更多了
   noData:false, //暂无数据
   isPage:false, // 是否需要分页 ispage的作用 进页面首次在onLoad中调用时,不需要合并数据
   page:1,
   limit:5,
   topHeight:0, 
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad(options) {
   this.getContactList()
 },
 // restore函数的作用,当业务有搜索、删除、新增、编辑等操作时,需要还原对应参数状态。
 // 初始化数据
 restore(){
   this.setData({
     loading: false, //加载更多的loading
     noMore: false,   //没有更多了
     noData:false,
     isPage:false,
     page:1,
     limit:5,
     topHeight:0, 
   })
 },
 getContactList(isPage){
   let params = {
     page:this.data.page,
     limit:this.data.limit,
     tid: this.data.inquirFform.tagID
   }
   req.group.contactList(params).then((res) =>{

     if (isPage) {
       // 下一页数据拼接在原始数据后面
       this.setData({
         groupData: this.data.groupData.concat(res.data.list),
         loading: false
       })
     } else {
       this.setData({
         groupData: res.data.list,
         loading: false
       })
     }
     //如果返回的数据为空,那么就没有下一页了
     if (res.data.list.length == 0 && this.data.isPage) {
       this.setData({
         noMore: true
       })
     }
     if (res.data.list.length == 0 && !this.data.isPage) {
       this.setData({
         noMore: true,
         noData:true
       })
     }
   })
 },
 // 下滑到底部触发
 scrollToLower(){
   if (!this.data.loading && !this.data.noMore) {
     this.setData({
       loading: true,
       page: this.data.page + 1,
       isPage:true
     })
     this.getContactList(this.data.isPage)
   }
 },
})

示例图片如下:

三、代码示例(2)使用onReachBottom

、、、

相关推荐
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106325 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん13 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_9160137414 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184117 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张17 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩18 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程20 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918412 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520862 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app