微信小程序—两种方式实现上拉加载与下拉刷新_微信小程序如何在components组件中用下拉加载

作者：小丑西瓜9 | 2024-03-12 02:04:28

踩

微信小程序如何在components组件中用下拉加载

在列表数据的时候，一般都会有分页，因为如果一次性都加载出来的话，会造成卡顿的现象，浪费用户的流量，所以就会有下拉刷新，上拉加载。这里我们介绍两种实现微信小程序的下拉刷新，上拉加载的实现方式：

一、第一种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107

通过scroll-view（可滚动视图区域）的属性来实现的，bindscrolltoupper（滚动到顶部/左边，会触发 scrolltoupper 事件），bindscrolltolower（滚动到底部/右边，会触发 scrolltolower 事件），bindscroll（）滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

2.效果图如下，

这里写图片描述

3.index.js中：


//index.js
//获取应用实例
const app = getApp();
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isRefresh = true;
Page({
  data: {
    refresh_h: false,//刷新
    load_h: true,//加载
    line_h: true,//底线
    scrollTop: 0,
  },

  onLoad: function () {
    //微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
    //设置第一次数据
    GetList(that);
  },

  //页面滑动到顶部(下拉刷新)
  topLoad: function (e) {
    isRefresh = true;
    curPage = 0;
    var that = this;
    that.setData({
      list: [],
      scrollTop: 0
    })
    GetList(that)
  },
  //页面滑动到底部(上拉加载)
  downLoad: function (e) {
    var that = this;
    isRefresh = false;
    GetList(that)
  },
  //设置竖向滚动条位置
  scroll: function (event) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
    console.log(event.detail.scrollTop);
  },
})


var GetList = function (that) {
  if (isRefresh == true) {
    //下拉刷新
    that.setData({
      refresh_h: false,
      load_h: true,
    });
  } else {
    //上拉加载
    that.setData({
      refresh_h: true,
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });
        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10){
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: false,
          });
        }else{
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {

    },
    complete: function () {
      // complete
    }
  })
}
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

4.index.wxml中：

<loading hidden='{{refresh_h}}' bindchange="loadingChange">
  刷新中...
</loading>
<scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" bindscroll="scroll" scroll-y="true" scroll-top="{{scrollTop}}" bindscrolltoupper="topLoad" bindscrolltolower="downLoad">
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}"></image>
      <view class="title">{{item.ctgTitles}}</view>
      <view class="body">{{item.name}}</view>
    </view>
  </block>
</scroll-view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--</view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
</loading>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.index.wxss中：

.image {
  width: 200rpx;
  height: 200rpx;
  float: left;
}

.myView {
  width: 100%;
  float: left;
  margin: 10px;
}

.title {
  font-size: 12px;
  padding-left: 10px;
  padding-top: 15px;
  float: left;
}

.body {
  font-size: 10px;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}
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

二、第二种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107

2.效果图如下：

这里写图片描述

3.second.js中：

// pages/second/second.js
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isFirst = true;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    load_h: true,//加载
    line_h: true,//底线
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //设置第一次数据
    wx.startPullDownRefresh;
    var that = this;
    GetList(that);
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听用户下拉动作");
    var that = this;
    curPage = 0;
    isFirst = true;
    that.setData({
      list: [],
    })
    GetList(that);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("监听用户上拉拉动作");
    var that = this;
    GetList(that);
  },

})


var GetList = function (that) {
  //设置加载提示窗是否显示
  if (isFirst == true){
    //第一次请求数据
    that.setData({
      load_h: true,
    });
    isFirst = false;
  }else{
    that.setData({
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      // console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        //成功停止刷新
        wx.stopPullDownRefresh;
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });

        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10) {
          that.setData({
            load_h: true,
            line_h: false,
          });
        } else {
          that.setData({
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {
      //失败停止刷新
      wx.stopPullDownRefresh;
    },
    complete: function () {
      // complete
    }
  })
}
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

4.second.wxml中：

<view>
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}"></image>
      <view class="title">{{item.ctgTitles}}</view>
      <view class="body">{{item.name}}</view>
    </view>
  </block>
</view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--</view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
</loading>1
2
3
4
5
6
7
8
9
10
11
12
13

5.second.wxss中：

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}
.image{
  width: 95%;
  margin: 20rpx;
}

.title{
   font-size: 18px;
   margin-left: 20rpx;
}

.body{
   font-size: 16px;
   margin-left: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6.second.json中：

{
  "enablePullDownRefresh": true
}1
2
3

7.demo地址：

http://download.csdn.net/download/afanbaby/10164329

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/221312