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

1.上拉加载和下拉刷新

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" 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);

}

需要更多小程序源代码的请联系作者，微信号：18217688158