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

一、前情提要

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

// 示例数组
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、代码示例（1）不使用onReachBottom

1. index.wxml

//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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. index.js

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)
   }
 },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

示例图片如下：

三、代码示例（2）使用onReachBottom

、、、