微信小程序之下拉加载和上拉刷新

Posted 2020-08-27 我一人，我异人，我亦人

微信小程序下拉刷新上拉加载的两种实现方法

方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

属性	类型	描述
enablePullDownRefresh	Boolean	是否开启下拉刷新，详见页面相关事件处理函数。

设置js里onPullDownRefresh和onReachBottom方法

属性	类型	描述
onPullDownRefresh	function	页面相关事件处理函数——监听用户下拉动作
onReachBottom	function	页面上拉触发底事件的处理函数

下拉加载说明：

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onPullDownRefresh(){
　　console.log(‘--------下拉刷新-------‘)
　　wx.showNavigationBarLoading() //在标题栏中显示加载

　　wx.request({
          url: ‘https://URL‘,
          data: {},
          method: ‘GET‘,
         // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 设置请求的 header
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
          }
    })                

　　

方法二：

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

属性	类型	描述
bindscrolltoupper	EventHandle	滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle	滚动到底部/右边，会触发 scrolltolower 事件

index.wxml

 1 <!--index.wxml-->
 2 <view class="container" style="padding:0rpx">
 3   <!--垂直滚动，这里必须设置高度-->
 4     <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
 5         class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
 6         <view class="item" wx:for="{{list}}">
 7             <image class="img" src="{{item.pic_url}}"></image>
 8             <view class="text">
 9                 <text class="title">{{item.name}}</text>
10                 <text class="description">{{item.short_description}}</text>
11             </view>
12         </view>
13     </scroll-view>
14     <view class="body-view">
15         <loading hidden="{{hidden}}" bindchange="loadingChange">
16             加载中...
17         </loading>
18     </view>
19 </view>

index.js

 1 var url = "http://www.imooc.com/course/ajaxlist";
 2 var page =0;
 3 var page_size = 5;
 4 var sort = "last";
 5 var is_easy = 0;
 6 var lange_id = 0;
 7 var pos_id = 0;
 8 var unlearn = 0;
 9 
10 
11 // 请求数据
12 var loadMore = function(that){
13     that.setData({
14         hidden:false
15     });
16     wx.request({
17         url:url,
18         data:{
19             page : page,
20             page_size : page_size,
21             sort : sort,
22             is_easy : is_easy,
23             lange_id : lange_id,
24             pos_id : pos_id,
25             unlearn : unlearn
26         },
27         success:function(res){
28             //console.info(that.data.list);
29             var list = that.data.list;
30             for(var i = 0; i < res.data.list.length; i++){
31                 list.push(res.data.list[i]);
32             }
33             that.setData({
34                 list : list
35             });
36             page ++;
37             that.setData({
38                 hidden:true
39             });
40         }
41     });
42 }
43 Page({
44   data:{
45     hidden:true,
46     list:[],
47     scrollTop : 0,
48     scrollHeight:0
49   },
50   onLoad:function(){
51     //   这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
52       var that = this;
53       wx.getSystemInfo({
54           success:function(res){
55               that.setData({
56                   scrollHeight:res.windowHeight
57               });
58           }
59       });
60        loadMore(that);
61   },
62   //页面滑动到底部
63   bindDownLoad:function(){   
64       var that = this;
65       loadMore(that);
66       console.log("lower");
67   },
68   scroll:function(event){
69     //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
70      this.setData({
71          scrollTop : event.detail.scrollTop
72      });
73   },
74   topLoad:function(event){
75     //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
76       page = 0;
77       this.setData({
78           list : [],
79           scrollTop : 0
80       });
81       loadMore(this);
82       console.log("lower");
83   }
84 })

index.wxss

 1 /**index.wxss**/
 2 
 3 .userinfo {
 4   display: flex;
 5   flex-direction: column;
 6   align-items: center;
 7 }
 8 
 9 .userinfo-avatar {
10   width: 128rpx;
11   height: 128rpx;
12   margin: 20rpx;
13   border-radius: 50%;
14 }
15 
16 .userinfo-nickname {
17   color: #aaa;
18 }
19 
20 .usermotto {
21   margin-top: 200px;
22 }
23 
24 /**/
25 
26 scroll-view {
27   width: 100%;
28 }
29 
30 .item {
31   width: 90%;
32   height: 300rpx;
33   margin: 20rpx auto;
34   background: brown;
35   overflow: hidden;
36 }
37 
38 .item .img {
39   width: 430rpx;
40   margin-right: 20rpx;
41   float: left;
42 }
43 
44 .title {
45   font-size: 30rpx;
46   display: block;
47   margin: 30rpx auto;
48 }
49 
50 .description {
51   font-size: 26rpx;
52   line-height: 15rpx;
53 }

效果图