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

小程序知识点二

1.上拉加载和下拉刷新

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
<block wx:for="{{goodsList}}" wx:key="item" >
<view>
<image src="{{item.goods_img}}" alt=""></image>
</view>
<view>{{item.name}}</view>
<view><text>￥<text>{{item.price}}</text></text><text>￥{{item.oldprice}}</text></view>
</block>
</scroll-view>

根据官方文档得知，scroll-view就是里面内容有各种滑动触发事件的DIV容器，比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性 scroll-top：设置滚动条的位置

，scroll-y：是否允许竖向滑动，height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll 是滚动触发的时间

Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件，所以不合适用来当做下拉刷新

一般来说 对于组件的属性，都是通过JS来动态控制的。

js

//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = 'https:www.shop.com/home/index/index

';
var GetList = function(that){
wx.request({
url: url,
data: {
page:page,
},
success: function(res){
var goodsList = that.data.goodsList;
for(var i = 0;i<res.data.info.length;i++){
goodsList.push(res.data.info[i]);
}
that.setData({
goodsList:goodsList
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data: {
goodsList:[],
scrollTop : 0,
scrollHeight:0,
},
//下拉刷新
onPullDownRefresh:function(){
this.onLoad()
},
onLoad: function () {
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
//首页商品
wx.request({
url: 'https:www.shop.com/home/product/search',
data: {},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})

},

// 该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
var that = this;
GetList(that);
},
// 该方法绑定了页面滚动时的事件
scroll:function(event){
this.setData({
scrollTop : event.detail.scrollTop
});
},
})

当初次加载页面的时候，执行onLoad函数，

onLoad: function () {
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});

//首页商品
wx.request({
url: 'https:www.shop.com/home/product/search',
data: {},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}

这里的onLoad有两个功能

一、获取设备接口用户手机屏幕高度

二、向服务器发送请求，获取数据

其中，wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台，最常用的就是获取设备窗口的宽度和高度。

Wx.request()是发送请求，为了保持良好习惯，需要把请求的数据（GET、POST）都要放在data{}中

小程序封装了一个下拉刷新的API，onPullDownRefresh监听下拉事件，所以

onPullDownRefresh:function(){
this.onLoad()
},

当下拉事件触发的时候，重新执行onLoad（）就可以实现刷新效果了

上拉加载

var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
that.setData({
hidden : false
});
wx.request({
url: url,
data: {
page:page,
},
success: function(res){
var goodsList = that.data.goodsList;
for(var i = 0;i<res.data.info.length;i++){
goodsList.push(res.data.info[i]);
}
that.setData({
goodsList:goodsList
});
page ++;
that.setData({
hidden:true
});
}
});
}
// 该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
var that = this;
GetList(that);
},
// 该方法绑定了页面滚动时的事件
scroll:function(event){
this.setData({
scrollTop : event.detail.scrollTop
});
},

bindDownLoad:每次触底都会触发GetList，去获取数据

Scroll:每次滚动的时候，都重新设置滚动条的位置

重点是看这个函数，我也是第一次用到调用函数来处理

var page = 0; 设置当前所请求的页数，这里我请求的方式类似于分别请求

url 请求的url

var GetList = function(){}; 是JS中设置函数的一种方式，先设置一个匿名函数，然后将这个匿名函数赋值给GetList这个变量，相当于这个变量代表了这个函数

wx.request() 发送请求

success 请求成功以后，对数据进行操作

var goodsList = that.data.goodsList; that是调用函数的时候，传递过来的，是this，代表当前页面Page()的实例化对象

that.data.goodsList 就是获取当前goodsList的值

每次执行这个函数的时候，都会page++，然后根据这个page的值去服务器获取数据，将新得到的数据，通过循环push，添加到这个goodsList，然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据，可以展现在前端页面了。

下拉刷新:1.触底，触发时间 2.调用函数，获取数据 3.将数据添加到所在页面js中

后端PHP代码：

public function index(){
$page = I('get.page')?I('get.page'):0;
$goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
$this->success($goods_list,'',true);
}