小程序中通過scroll-view來控制頁面的滾動,其主要作用是可以用來做上拉加載下拉刷新列表頁。
json頁：做下拉刷新時需要用到小程序提供的onPullDownRefresh方法,所以在配置項里面必須開啟enablePullDownRefresh
{
? "navigationBarTitleText": "我的收藏",
? "enablePullDownRefresh": true,
? "backgroundColor": "#eeeeee"
}
wxml視圖頁
scroll-top：設置豎向滾動條的位置，如果設置的值沒有變化,組件不會渲染。
scroll-y：允許縱向滾動
upper-threshold：距頂部/左邊多遠時（單位px），觸發scrolltoupper 事件，默認值為50px
lower-threshold：距底部/右邊多遠時（單位px），觸發 scrolltolower 事件，默認值為50px（這個屬性要注意，如果設置的值過大會多次觸發scrolltolower）
bindscrolltolower：滾動到底部/右邊，觸發 scrolltolower 事件
bindscrolltoupper：滾動到頂部/左邊，觸發 scrolltoupper 事件
wxss樣式：使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height，一定要設置！??！
.hot{
? width: 100%;
? height: 40px;
? line-height: 40px;
? font-size: 16px;
? text-indent: 24px;
? background-color: #f0f0f0;
}
.hot-box{
? display: block;
? height: 100%;
}
JS頁
var util = require('../../../utils/util.js');
constApp = getApp();
Page({
? data:{
???itemData: [],//收藏店鋪的信息
???storePic:"",//店鋪圖片
???pageNum:1,//頁數
???total:"",//總記錄數
???refresh:false,//判斷刷新還是加載
???done:false,//是否加載全部表項
? },
? //頁面加載
?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();
? },
? //判斷是刷新還是加載，調用方法
?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();
?????????}
???????}
?????});
? },
邏輯部分：刷新和加載是通過當前頁數和總記錄數來控制的，下拉觸發onPullDownRefresh事件，pageSize為1，刷新重新加載當前頁面數據。上拉觸發scrolltolower事件，當前頁數加1。onLoad、onPullDownRefresh和scrolltolower事件均調用了自定義的getList方法。通過定義refresh的布爾值，用來判斷是下拉刷新調用的這個函數,還是頁面加載時調用的這個函數。Scrolltolower事件觸發，pageSize加1，如果加載頁面的記錄數大于等于后臺返回的總記錄數，則表示全部加載。通過setTimeout()設置多長時間觸發該事件。
注意：一定要設置height和lower-threshold屬性，如果不設置height，scrolltolower事件不觸發，如果每頁顯示的記錄數的高度小于height的值，scrolltolower事件不觸發。如果lower-threshold設置的值過大，會出現scrolltolower多次觸發的現象，官方默認為50，設置為1就可以。
