微信小程序 使用view，scroll-view实现上拉加载，下拉刷新

作者：王慧永，来自授权地址

一：使用view实现下拉刷新，上拉加载数据

ecc42f9e82730c219bf423d0cb68e619.gif (443.6 KB, 下载次数: 33)

下载附件

2018-5-30 20:34 上传

如图,微信小程序实现上拉加载，下拉刷新。代码如下 
js文件代码

// pages/loading/loading.js  
var p = 1  
var url = "";  
var GetList = function (that) {  
  that.setData({  
    hidden: false  
  });  
  wx.request({  
    url: url,  
    data: {  
      pageSize: 10,  
      pageNo: p  
    },  
    success: function (res) {  
      var l = that.data.list  
      for (var i = 0; i < res.data.length; i++) {  
        l.push(res.data[i])  
      }  
      that.setData({  
        list: l  
      });  
      p++;  
      that.setData({  
        hidden: true  
      });  
    }  
  });  
}  
Page({  
  data: {  
    list: []  
  },  
  onLoad: function (options) {  
    // 页面初始化 options为页面跳转所带来的参数  
    var that = this  
    GetList(that)  
  },  
  onPullDownRefresh: function () {  
    //下拉  
    console.log("下拉");  
    p = 1;  
    this.setData({  
      list: [],  
    });  
    var that = this  
    GetList(that)  
  },  
  onReachBottom: function () {  
    //上拉  
    console.log("上拉")  
    var that = this  
    GetList(that)  
  }  
})  

json文件代码

{  
    "enablePullDownRefresh": true,  
    "backgroundTextStyle": "dark"  
}  

wxml文件代码

<view class="item" wx:for="{{list}}" wx:for-item="item" for:key="item.carrierId">  
    <image class="img" src=""></image>  
    <text calss="txt" >{{item.carrierName}}</text>  
    <text class="txt">{{item.carrierId}}</text>  
</view>  

wxss文件代码

.img{  
    border-radius: 50%;  
    height: 100rpx;  
    width: 100rpx;  
}  
.txt{  
    margin: 10rpx 10rps 10rpx 10rpx;  
    font-family: "微软雅黑";  
    font-size: 50rpx;  
    height: 50rpx;  
}  

说明：这个接口返回的就是 分页的数据，根据传入的参数，每次返回不同的数据

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action  

二：使用scroll-view实现上拉加载，下拉刷新

445b503f6d5c8127536a0ce6b4bf56e0.gif (540.49 KB, 下载次数: 47)

下载附件

2018-5-30 20:34 上传

如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下： 
js文件代码：

var url = "";  
var page = 1;  
var GetList = function (that) {  
    that.setData({  
        hidden: false  
    });  
    wx.request({  
        url: url,  
        data: {  
            pageSize: 10,  
            pageNo: page  
        },  
        success: function (res) {  
            var l = that.data.list  
            for (var i = 0; i < res.data.length; i++) {  
                l.push(res.data[i])  
            }  
            that.setData({  
                list: l  
            });  
            page++;  
            that.setData({  
                hidden: true  
            });  
        }  
    });  
}  
Page({  
    data: {  
        hidden: true,  
        list: [],  
        scrollTop: 0,  
        scrollHeight: 0  
    },  
    onLoad: function () {  
        var that = this;  
        wx.getSystemInfo({  
            success: function (res) {  
                console.info(res.windowHeight);  
                that.setData({  
                    scrollHeight: res.windowHeight  
                });  
            }  
        });  
    },  
    onShow: function () {  
        var that = this;  
        GetList(that);  
    },  
    bindDownLoad: function () {  
        var that = this;  
        GetList(that);  
    },  
    scroll: function (event) {  
        this.setData({  
            scrollTop: event.detail.scrollTop  
        });  
    },  
    refresh: function (event) {  
        page = 1;  
        this.setData({  
            list: [],  
            scrollTop: 0  
        });  
        GetList(this)  
    },  
    onPullDownRefresh: function () {  
        console.log("下拉")  
    },  
    onReachBottom: function () {  
        console.log("上拉");  
    }  
})  

json文件代码

{  
    "navigationBarTitleText": "下拉刷新",  
    "enablePullDownRefresh": true,  
    "backgroundTextStyle": "dark"  
}  

wxml文件代码：

<view class="container">  
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"   
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">  
        <view class="item" wx:for="{{list}}">  
            <image class="img" src=""></image>  
            <view class="text">  
                <text class="title">{{item.carrierName}}</text>  
                <text class="description">{{item.carrierTelphone}}</text>  
                <text class="description">{{item.carrierId}}</text>  
            </view>  
        </view>  
    </scroll-view>  
    <view class="body-view">  
        <loading hidden="{{hidden}}" bindchange="loadingChange">  
            加载中...  
        </loading>  
    </view>  
</view>  

wxss文件代码

.container{  
    height: 100%;  
    padding: 20rpx;  
}  
.item{  
    display: flex;  
    margin-bottom: 50rpx;  
width:100%;  
background:#f0f0f0;  
overflow:hidden;  
}  
.img{  
    height: 100rpx;  
    width: 100rpx;  
    border-radius: 50%;  
}  
.text{  
    display: flex;  
    flex-shrink:1;  
    flex-grow:1;  
    padding: 10rpx;  
    flex-wrap: wrap;  
    font-size: 50rpx;  
}  
.title{  
    font-size: 50rpx;  
    margin:10rpx 100rpx 10rpx 100rpx;  
}  
.description{  
    font-size: 50rpx;  
    align-self:flex-end;  
}  

注意，

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。