如果同時(shí)想要下拉刷新和鼠標(biāo)觸底加載缘揪，就可以在json文件中設(shè)置了"enablePullDownRefresh": true屬性健盒，如果只需要觸底加載驱还，就可以采用scroll-view組件的bindscrolltolower事件來(lái)觸發(fā)。這個(gè)是采用的網(wǎng)上的demo胀莹，不想把數(shù)據(jù)單獨(dú)抽出來(lái)了，而且實(shí)際應(yīng)用下基本是向接口請(qǐng)求分頁(yè)加載婚温，本篇代碼為轉(zhuǎn)載描焰，轉(zhuǎn)載的地址為原demo地址
需求：
當(dāng)我們?yōu)g覽到屏幕末尾時(shí)，加載出下一頁(yè)的內(nèi)容栅螟。
注意實(shí)現(xiàn)細(xì)節(jié)：
1荆秦、 由于采用的是scroll-view 來(lái)實(shí)現(xiàn)，因此需要豎向滾動(dòng)力图，那么scroll-y 屬性的值就必須要設(shè)置成 true ,而且scroll-view 要能豎向滾動(dòng)步绸，必須要設(shè)置 高度(height).
2、當(dāng)我們滾動(dòng)到屏幕的底部時(shí)搪哪，會(huì)觸發(fā)bindscrolltolower 事件靡努，lower-threshold 這個(gè)屬性用于控制距離屏幕底部還剩下多少像素時(shí)就開(kāi)始觸發(fā)這個(gè)事件坪圾。
3、當(dāng)滾動(dòng)到屏幕頂部時(shí)會(huì)觸發(fā) bindscrolltoupper 事件
4惑朦、由于bindscrolltolower 在一瞬間可能觸發(fā)多次兽泄，可能會(huì)導(dǎo)致發(fā)送多次請(qǐng)求來(lái)加載數(shù)據(jù)，我們必須要保證只能有一個(gè)請(qǐng)求去發(fā)送數(shù)據(jù)漾月，因此需要用一個(gè)變量進(jìn)行控制病梢，詳情見(jiàn) js 代碼中的 scrollToLower 方法。
實(shí)現(xiàn)效果：
-
WXML
<!-- bindscrolltolower滾動(dòng)到底部/右邊時(shí)觸發(fā)梁肿，lower-threshold 距底部/右邊多遠(yuǎn)時(shí)蜓陌，觸發(fā) scrolltolower 事件 -->
<scroll-view class='scroll-view-container' scroll-y='{{true}}' bindscrolltolower='scrollToLower'
bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='0'>
<block wx:for='{{articles}}' wx:key='{{item.id}}'>
<view class='articles-container'>
<view class='info'>
<image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}
<text class='created-at'>{{item.created_at}}</text>
<text class='category'>{{item.category}}</text>
</view>
</view>
</block>
<view class='data-loading' hidden='{{hidden}}'>
數(shù)據(jù)加載中...
</view>
</scroll-view>
-
WXSS
.scroll-view-container {
background-color: #fff;
height:100vh;
}
.data-loading {
height: 100rpx;
line-height: 100rpx;
background-color: #eee;
text-align: center;
font-size: 14px;
}
.articles-container {
border-bottom: 1px solid #eee;
margin: 30rpx 10rpx;
background-color: #eee;
}
.articles-container .info {
font-size: 12px;
margin: 20rpx 0rpx;
height: 100%;
display: inline-block;
}
.articles-container .info .avatar {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
border-radius: 60rpx;
display: inline-block;
vertical-align: middle;
}
.articles-container .info .created-at {
margin: 0px 20rpx;
display: inline-block;
vertical-align: middle;
}
.articles-container .info .category {
color: #3399ea;
display: inline-block;
vertical-align: middle;
}
-
JS
Page({
data: {
/**
* 用于控制當(dāng) scroll-view 滾動(dòng)到底部時(shí)，顯示 “數(shù)據(jù)加載中...” 的提示
*/
hidden: true,
/**
* 用于顯示文章的數(shù)組
*/
articles: [],
/**
* 數(shù)據(jù)是否正在加載中吩蔑，避免用戶(hù)瞬間多次下滑到底部钮热，發(fā)生多次數(shù)據(jù)加載事件
*/
loadingData: false
},
onLoad: function(options) {
this.loadData(true);
},
loadData: function(tail, callback) {
var that = this;
wx.request({
url: 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
success: function(r) {
var oldArticles = that.data.articles,
newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles.concat(oldArticles);
that.setData({
articles: newArticles
});
if (callback) {
callback();
}
},
error: function(r) {
console.info('error', r);
},
complete: function() {}
})
},
/**
* 上滑加載更多
*/
scrollToLower: function(e) {
console.log('上滑加載更多')
console.info('scrollToLower', e);
var hidden = this.data.hidden,
loadingData = this.data.loadingData,
that = this;
if (hidden) {
this.setData({
hidden: false
});
console.info(this.data.hidden);
}
if (loadingData) {
return;
}
this.setData({
loadingData: true
});
// 加載數(shù)據(jù),模擬耗時(shí)操作
wx.showLoading({
title: '數(shù)據(jù)加載中...',
});
setTimeout(function() {
that.loadData(true, () => {
that.setData({
hidden: true,
loadingData: false
});
wx.hideLoading();
});
console.info('上拉數(shù)據(jù)加載完成.');
}, 2000);
},
scrollToUpper: function(e) {
wx.showToast({
title: '觸頂了...',
})
}
})
