转自：https://www.cnblogs.com/simba-lkj/p/6274232.html
方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先要在json文件里设置window属性
| 属性 | 类型 | 描述 |
| enablePullDownRefresh | Boolean | 是否开启下拉刷新，详见页面相关事件处理函数。 |
设置js里onPullDownRefresh和onReachBottom方法
| 属性 | 类型 | 描述 |
| onPullDownRefresh | function | 页面相关事件处理函数——监听用户下拉动作 |
| onReachBottom | function | 页面上拉触发底事件的处理函数 |
下拉加载说明：
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
方法二：
在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 }效果图