小程序中通过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就可以。
网友评论