一、什么是上拉觸底事件
上拉觸底是移動(dòng)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。
二、監(jiān)聽上拉觸底事件
在頁面的.js文件中，通過onReachBottom()函數(shù)即可監(jiān)聽當(dāng)前頁面的上拉觸底事件。
三、配置上拉觸底距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁面底部的距離。
可以在全局或頁面的 .json 配置文件中，通過 onReachBottomDistance 屬性來配置上拉觸底的距離。
小程序默認(rèn)的觸底距離是 50px，在實(shí)際開發(fā)中，可以根據(jù)自己的需求修改這個(gè)默認(rèn)值。文章來源：http://www.zghlxwxcb.cn/news/detail-705935.html
四、微信小程序上拉觸底案例
1. 頁面效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-705935.html
2. 實(shí)現(xiàn)步驟
- 定義獲取隨機(jī)顏色的方法
- 在頁面加載時(shí)初始化數(shù)據(jù)
- 渲染UI結(jié)構(gòu)并且美化頁面效果
- 在上拉觸底時(shí)調(diào)用獲取隨機(jī)顏色的方法
- 添加loading提示效果
- 對上拉觸底進(jìn)行節(jié)流處理
3. 具體實(shí)現(xiàn)
- 定義獲取隨機(jī)顏色的方法
getColors() {
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'GET',
success: ( {data:res})=>{
// console.log(res.data);
this.setData({
colorList: this.data.colorList.concat(res.data)
})
console.log(this.data.colorList);
},
});
},
- 在頁面加載時(shí)初始化數(shù)據(jù)
onLoad(options) {
this.getColors();
},
- 渲染UI結(jié)構(gòu)并且美化頁面效果
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
/* pages/connect/connect.wxss */
.num-item {
border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}
- 在上拉觸底時(shí)調(diào)用獲取隨機(jī)顏色的方法
onReachBottom() {
this.getColors();
},
- 添加loading提示效果
在調(diào)用getColors( )函數(shù)的內(nèi)部，發(fā)送請求之前展示loading效果，發(fā)送請求獲取數(shù)據(jù)之后隱藏loading效果。
getColors() {
// 需要展示loading效果
wx.showLoading({
title: '正在加載中...',
}); // 展示loading效果
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'GET',
success: ( {data:res})=>{
console.log(res.data);
this.setData({
colorList: this.data.colorList.concat(res.data)
})
console.log(this.data.colorList);
},
complete: ()=>{
wx.hideLoading();
}
});
},
- 對上拉觸底進(jìn)行節(jié)流處理
- 在data中定義isLoading節(jié)流閥：true 正在進(jìn)行數(shù)據(jù)請求，false 當(dāng)前沒有進(jìn)行任何數(shù)據(jù)請求
- 在getColor()方法中修改isLoading節(jié)流閥的值：剛調(diào)用 設(shè)置為 true，在網(wǎng)絡(luò)請求的complete中 重置為 false
- 在onReachBottom中判斷節(jié)流閥的值，從而對數(shù)據(jù)請求進(jìn)行節(jié)流控制：true 阻止當(dāng)前請求，false 可以發(fā)起數(shù)據(jù)請求
data: {
colorList: [],
isLoading: false
},
getColors() {
this.setData({
isLoading: true
});
// 需要展示loading效果
wx.showLoading({
title: '正在加載中...',
}); // 展示loading效果
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'GET',
success: ( {data:res})=>{
console.log(res.data);
this.setData({
colorList: this.data.colorList.concat(res.data)
})
console.log(this.data.colorList);
},
complete: ()=>{
wx.hideLoading();
this.setData({
isLoading: false
})
}
});
},
onReachBottom() {
if (this.data.isLoading===true) {
return;
}
this.getColors();
},
4. 完整.js文件代碼
// pages/connect/connect.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
colorList: [],
isLoading: false
},
getColors() {
this.setData({
isLoading: true
});
// 需要展示loading效果
wx.showLoading({
title: '正在加載中...',
}); // 展示loading效果
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/color',
method: 'GET',
success: ( {data:res})=>{
console.log(res.data);
this.setData({
colorList: this.data.colorList.concat(res.data)
})
console.log(this.data.colorList);
},
complete: ()=>{
wx.hideLoading();
this.setData({
isLoading: false
})
}
});
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.getColors();
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
if (this.data.isLoading===true) {
return;
}
this.getColors();
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage() {
}
})
到了這里，關(guān)于微信小程序上拉觸底事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
