小程序知識點二
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);
}