微信小程序 上列表拉加载下拉刷新_下拉加载列表

  上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能，为用户带来更加流畅、便捷的使用体验。

1. 实现效果

2. 实现思路

(1) 首先需要在使用到的 json 文件下配置 “enablePullDownRefresh”: true

{
   "usingComponents": {},
   "enablePullDownRefresh": true,
}
1
2
3
4

(2) 在 js 文件中加上触底函数跟上拉函数

//触底函数
onReachBottom(){
    console.log("上拉加载....");
},
//上拉函数
onPullDownRefresh(){
    console.log("下拉刷新...");
},
1
2
3
4
5
6
7
8

(3) 请求接口，将新请求的数据通过 cancat 方法合并到 list 数组中，然后更新数据。 concat() 方法用于连接两个或多个数组

    var dataList = that.data.dataList.concat(dataArr)
        that.setData({
          dataList: dataList
        });
1
2
3
4

（4）对数据进行判断，如果列表数据条数小于总条数，隐藏 “正在加载” 字样，显示 “已加载全部” 字样

if (res.data.dataList.length < this.data.limit) {
    that.setData({
        loading: false,
        loaded: true,
    });
}
1
2
3
4
5
6

(5) 上拉加载时，改变文字状态，然后调用接口
let that = this;
if (!that.data.loading) {
that.setData({
loading: true,
loaded: false
});
}
setTimeout(function () {
that.getData();
}, 500)

（6）下拉刷新时，将页码重置为 1 然后再次调用接口即可，但是不要忘了刷新完成后要关闭刷新的操作：wx.hideNavigationBarLoading() 和 wx.stopPullDownRefresh() 。

 this.data.list = []
 wx.showNavigationBarLoading() 
 this.setData({
     page: 1
 });
 this.licensePort(); 
 setTimeout(function () {
     wx.showToast({
         title: '刷新成功',
         icon: 'none',
         duration: 1000
     })
     wx.hideNavigationBarLoading() 
     wx.stopPullDownRefresh() 
 }, 1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 完整代码

3.1. wxml

<!-- 内容 -->
<view class="navBox" wx:for="{{dataList}}" wx:key="index">
  <view>
    <text class="lableBox">区县</text><text>{{item}}</text>
  </view>
</view>
<!-- 加载时文字 -->
<view class="bomTxt">
  <view hidden="{{!loading}}">正在加载...</view>
  <view hidden="{{!loaded}}">已加载全部</view>
</view>
1
2
3
4
5
6
7
8
9
10
11

3.2. wxss

page {
  background: #EFF4FF;
}
.navBox {
  margin: 2.5%;
  font-size: 14px;
  border-radius: 36rpx;
  background: white;
}
.lableBox {
  display: inline-block;
  width: 90px;
  text-align: right;
  margin-right: 30rpx;
}
.navBox view {
  padding: 24rpx 30rpx;
}
.navBox view:not(:last-child) {
  border-bottom: 1px solid rgb(235, 237, 239);
}
.bomTxt {
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: rgb(126, 138, 155);
  padding: 0rpx 0rpx 20rpx 0rpx;
}
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

3.3. json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#6197FB",
  "navigationBarTitleText": "列表刷新加载",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "light",
  "backgroundColor": "#6197FB"
}
1
2
3
4
5
6
7
8

3.4. js

//获取应用实例
var app = getApp();
Page({
  data: {
    pageNum: 1, //当前第几页
    pageSize: 20, //一页展示几条
    dataList: [], //所有数据
    loading: false, //是否展示 “正在加载” 字样
    loaded: false //是否展示 “已加载全部” 字样
  },
  onLoad: function (options) {
    var that=this
    that.getData(1, 20, 1);
  },
  /**
   * 获取数据
   */
  getData(pageNum, pageSize, type) {
    var that = this;
    if (type == 1) { //刷新
      that.setData({
        pageNum: 1,
        pageSize: pageSize,
        dataList: [],
      });
      setTimeout(function () {
        var dataArr = []
        for (var i = 0; i < pageSize; i++) {
          dataArr.push(that.data.pageNum + '内容' + i);
        }
        var dataList = that.data.dataList.concat(dataArr)
        that.setData({
          dataList: dataList
        });
        wx.showToast({
          title: '刷新成功',
          icon: 'none',
          duration: 1000
        })
        wx.hideNavigationBarLoading() //完成停止加载
        wx.stopPullDownRefresh() //停止下拉刷新
        if (dataList.length>0) {
          // 更新数据
          that.setData({
            dataList: dataList,
            loading: false,
          });
        } else {
          that.setData({
            loaded: true, //显示 “没有数据” 字样 
            loading: false //隐藏 “正在加载” 字样
          });
        }
      }, 2000);
    } else if (type == 2) { //加载
      if (pageNum > 3) {
        wx.showToast({
          title: '没有更多了',
          icon: 'success',
          duration: 1000
        })
      } else {
        wx.showLoading({
          title: '加载中...',
        });
        setTimeout(function () {
          for (var i = 0; i < pageSize; i++) {
            that.data.dataList.push( '内容' + i);
          }
          that.setData({
            pageNum: pageNum,
            dataList:  that.data.dataList
          });
          wx.hideLoading();
        }, 2000);
      }

    }
  },
  /**
   * 上拉加载
   */
  onReachBottom() {
    const that = this;
    if (!that.data.loading) {
      that.setData({
        loading: true, //加载中
        loaded: false //是否加载完所有数据
      });
    }
    var pageNums = that.data.pageNum + 1;
    this.getData(pageNums, 20, 2);
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    var that=this
    wx.showNavigationBarLoading() //在标题栏中显示加载圈圈
    that.getData(1, 20, 1);
  }
})
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102