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);
}
需要更多小程序源代码的请联系作者，微信号：18217688158
请发表评论