小程序中通過scroll-view來控制頁(yè)面的滾動(dòng),其主要作用是可以用來做上拉加載下拉刷新列表頁(yè)剔氏。
json頁(yè)：做下拉刷新時(shí)需要用到小程序提供的onPullDownRefresh方法,所以在配置項(xiàng)里面必須開啟enablePullDownRefresh
{
? "navigationBarTitleText": "我的收藏",
? "enablePullDownRefresh": true,
? "backgroundColor": "#eeeeee"
}
wxml視圖頁(yè)
scroll-top：設(shè)置豎向滾動(dòng)條的位置准给，如果設(shè)置的值沒有變化,組件不會(huì)渲染绵跷。
scroll-y：允許縱向滾動(dòng)
upper-threshold：距頂部/左邊多遠(yuǎn)時(shí)（單位px）霹琼，觸發(fā)scrolltoupper 事件圈膏，默認(rèn)值為50px
lower-threshold：距底部/右邊多遠(yuǎn)時(shí)（單位px）倔矾，觸發(fā) scrolltolower 事件驼抹，默認(rèn)值為50px（這個(gè)屬性要注意浮还，如果設(shè)置的值過大會(huì)多次觸發(fā)scrolltolower）
bindscrolltolower：滾動(dòng)到底部/右邊竟坛，觸發(fā) scrolltolower 事件
bindscrolltoupper：滾動(dòng)到頂部/左邊，觸發(fā) scrolltoupper 事件
wxss樣式：使用豎向滾動(dòng)時(shí)钧舌，需要給一個(gè)固定高度担汤，通過 WXSS 設(shè)置 height，一定要設(shè)置Ｑ恿酢Ｂ浴！
.hot{
? width: 100%;
? height: 40px;
? line-height: 40px;
? font-size: 16px;
? text-indent: 24px;
? background-color: #f0f0f0;
}
.hot-box{
? display: block;
? height: 100%;
}
JS頁(yè)
var util = require('../../../utils/util.js');
constApp = getApp();
Page({
? data:{
???itemData: [],//收藏店鋪的信息
???storePic:"",//店鋪圖片
???pageNum:1,//頁(yè)數(shù)
???total:"",//總記錄數(shù)
???refresh:false,//判斷刷新還是加載
???done:false,//是否加載全部表項(xiàng)
? },
? //頁(yè)面加載
?onLoad:function(options) {
??? this.data.refresh = true
??? this.getList();
? },
? //下拉刷新
?onPullDownRefresh:function() {
??? this.data.pageNum = 1;
??? this.data.refresh = true;
??? this.loading();
? },
? //上拉加載
?loadMore:function() {
??? var that = this
??? that.data.refresh=false;
???that.setData({
?????pageNum: that.data.pageNum +1,
??? })
???that.loading();
? },
? //判斷是刷新還是加載碘赖，調(diào)用方法
?loading:function() {
???wx.showLoading({
?????title:this.data.refresh ? '刷新中...' : '加載中...',
??? })
???setTimeout(this.getList, 1500);
? },
?getList:function() {
??? var that = this
??? varcustId = App.globalData.custid;
??? varmarketId = App.globalData.marketid;
???util.req('collection_getShopCollectionList.action',
????? {
???????pageNum: that.data.pageNum,
???????pageSize:8,
???????custId: custId,
???????marketId: marketId
?????},
????? 'GET',
????? {
???????'content-type': 'application/json'
?????},
????? function(res) {
???????if(that.data.refresh) {
?????????that.setData({
???????????storePic:'/image/dianpu.png',
???????????itemData: res.data.list,
???????????done:false
?????????})
?????????wx.hideLoading();
?????????wx.stopPullDownRefresh();
???????}else{
?????????var num = (that.data.pageNum) * 8
?????????console.log('num='+num);
?????????vartotal = res.data.total
?????????console.log('total='+ total);
?????????if(num >= total) {
???????????that.setData({
?????????????storePic:'/image/dianpu.png',
?????????????itemData: that.data.itemData.concat(res.data.list),
?????????????done:true,
???????????})
???????????wx.hideLoading();
???????????return
?????????}else{
???????????that.setData({
?????????????storePic:'/image/dianpu.png',
?????????????itemData: that.data.itemData.concat(res.data.list),
?????????????done:false,
???????????})
???????????wx.hideLoading();
?????????}
???????}
?????});
? },
邏輯部分：刷新和加載是通過當(dāng)前頁(yè)數(shù)和總記錄數(shù)來控制的驾荣，下拉觸發(fā)onPullDownRefresh事件，pageSize為1普泡，刷新重新加載當(dāng)前頁(yè)面數(shù)據(jù)播掷。上拉觸發(fā)scrolltolower事件，當(dāng)前頁(yè)數(shù)加1撼班。onLoad歧匈、onPullDownRefresh和scrolltolower事件均調(diào)用了自定義的getList方法。通過定義refresh的布爾值砰嘁，用來判斷是下拉刷新調(diào)用的這個(gè)函數(shù),還是頁(yè)面加載時(shí)調(diào)用的這個(gè)函數(shù)件炉。Scrolltolower事件觸發(fā)，pageSize加1矮湘，如果加載頁(yè)面的記錄數(shù)大于等于后臺(tái)返回的總記錄數(shù)斟冕，則表示全部加載。通過setTimeout()設(shè)置多長(zhǎng)時(shí)間觸發(fā)該事件缅阳。
注意：一定要設(shè)置height和lower-threshold屬性磕蛇，如果不設(shè)置height，scrolltolower事件不觸發(fā)十办，如果每頁(yè)顯示的記錄數(shù)的高度小于height的值秀撇，scrolltolower事件不觸發(fā)。如果lower-threshold設(shè)置的值過大向族，會(huì)出現(xiàn)scrolltolower多次觸發(fā)的現(xiàn)象呵燕，官方默認(rèn)為50，設(shè)置為1就可以炸枣。
