前言
上拉加載和下拉刷新是小程序開發(fā)的常見需求。本文將介紹如何在微信小程序中實(shí)現(xiàn)上拉加載和下拉刷新的功能，為用戶帶來更加流暢、便捷的使用體驗(yàn)。
實(shí)現(xiàn)效果如下：
實(shí)現(xiàn)思路：
1. 首先需要在使用到的
json文件下配置"enablePullDownRefresh": true
{
"usingComponents": {},
"enablePullDownRefresh": true,
}
2. 在
js文件中加上觸底函數(shù)跟上拉函數(shù)
//觸底函數(shù)
onReachBottom(){
console.log("上拉加載....");
},
//上拉函數(shù)
onPullDownRefresh(){
console.log("下拉刷新...");
},
3. 請求接口，將新請求的數(shù)據(jù)通過
cancat方法合并到list數(shù)組中，然后更新數(shù)據(jù)
注： concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組
this.data.page++;
let list = that.data.list.concat(res.data.data.rows)
that.setData({
list: list,
loading: false,
});
4. 對數(shù)據(jù)進(jìn)行判斷，如果列表數(shù)據(jù)條數(shù)小于總條數(shù)，隱藏 “正在加載” 字樣，顯示 “已加載全部” 字樣
if (res.data.data.rows.length < this.data.limit) {
that.setData({
loading: false,
loaded: true,
});
}
5. 上拉加載時(shí)，改變文字狀態(tài)，然后調(diào)用接口
let that = this;
if (!that.data.loading) {
that.setData({
loading: true,
loaded: false
});
}
setTimeout(function () {
that.licensePort();
}, 500)
6. 下拉刷新時(shí)，將頁碼重置為
1然后再次調(diào)用接口即可，但是不要忘了刷新完成后要關(guān)閉刷新的操作：wx.hideNavigationBarLoading()和wx.stopPullDownRefresh()。
this.data.list = []
wx.showNavigationBarLoading()
this.setData({
page: 1
});
this.licensePort();
setTimeout(function () {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
}, 1000)
其他你可能關(guān)注的配置：
json文件中：
1. backgroundTextStyle: light // 刷新時(shí)三個(gè)點(diǎn)的顏色，只能是
light或者dark
2. backgroundColor: #FC1944 // 刷新時(shí)背景的顏色
js文件中：
3.wx.showNavigationBarLoading() // 在標(biāo)題欄中顯示加載
各文件完整代碼如下：
wxml文件
<!-- 內(nèi)容 -->
<view class="navBox" wx:for="{{list}}" wx:key="index">
<view><text class="lableBox">區(qū)縣</text><text>{{item.dqbm}}</text></view>
<view><text class="lableBox">聯(lián)系人</text> <text>{{item.lxr}}</text></view>
<view><text class="lableBox">電話</text> <text>{{item.lxdh}}</text></view>
<view><text class="lableBox">地址</text> <text>{{item.qydz}}</text></view>
</view>
<!-- 加載時(shí)文字 -->
<view class="bomTxt">
<view hidden="{{!loading}}">正在加載...</view>
<view hidden="{{!loaded}}">已加載全部</view>
</view>
js文件
//獲取應(yīng)用實(shí)例
var app = getApp();
Page({
data: {
page: 1, //當(dāng)前第幾頁
limit: 10, //一頁展示幾條
list: [], //所有數(shù)據(jù)
loading: false, //是否展示 “正在加載” 字樣
loaded: false //是否展示 “已加載全部” 字樣
},
//生命周期函數(shù)--監(jiān)聽頁面加載
onLoad: function (options) {
this.informPort(); //調(diào)用接口方法
},
// 企業(yè)信息接口
informPort() {
var that = this; // //防止this指向問題
// 后臺需要的參數(shù)
app.http.informPort({
qymc: "",
page: this.data.page,
limit: this.data.limit,
}).then(res => {
if (res.data.code == '10000') {
if (res.data.data.records && res.data.data.records.length > 0) {
// console.log("請求成功", res.data.data.records)
that.data.page++
//新請求的數(shù)據(jù)通過cancat方法合并到list數(shù)組中
let list = that.data.list.concat(res.data.data.records)
// 更新數(shù)據(jù)
that.setData({
list: list,
loading: false,
});
//如果列表數(shù)據(jù)條數(shù)小于總條數(shù)，隱藏 “正在加載” 字樣，顯示 “已加載全部” 字樣
if (res.data.data.records.length < that.data.limit) {
that.setData({
loading: false,
loaded: true,
});
}
} else {
that.setData({
loaded: true, //顯示 “沒有數(shù)據(jù)” 字樣
loading: false //隱藏 “正在加載” 字樣
});
}
}
})
},
// 觸底函數(shù)---上拉加載
onReachBottom() {
let that = this; //防止this指向問題
if (!that.data.loading) {
that.setData({
loading: true, //加載中
loaded: false //是否加載完所有數(shù)據(jù)
});
}
//延時(shí)調(diào)用接口
setTimeout(function () {
that.informPort();
}, 500)
},
// 上拉函數(shù)---下拉刷新
onPullDownRefresh() {
this.data.list = []
wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載圈圈
this.setData({
page: 1
}); //重置頁碼
app.http.informPort().then(res => {
if (res.data.code == '10000') {
setTimeout(function () {
wx.showToast({
title: '刷新成功',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加載
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
} else if (res.data.code != 10000) {
setTimeout(function () {
wx.showToast({
title: '刷新失敗',
icon: 'none',
duration: 1000
})
wx.hideNavigationBarLoading() //完成停止加載
wx.stopPullDownRefresh() //停止下拉刷新
}, 1000)
}
})
}
})
wxss文件
page {
background: #EFF4FF;
}
.navBox {
margin: 2.5%;
font-size: 14px;
border-radius: 36rpx;
background: white;
}
.lableBox {
display: inline-block;
width: 90px;
text-align: right;
margin-right: 30rpx;
}
.navBox view {
padding: 24rpx 30rpx;
}
.navBox view:not(:last-child) {
border-bottom: 1px solid rgb(235, 237, 239);
}
.bomTxt {
display: flex;
justify-content: center;
font-size: 12px;
color: rgb(126, 138, 155);
padding: 0rpx 0rpx 20rpx 0rpx;
}
json文件文章來源：http://www.zghlxwxcb.cn/news/detail-507459.html
{
"usingComponents": {},
"navigationBarBackgroundColor": "#6197FB",
"navigationBarTitleText": "企業(yè)信息",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light",
"backgroundColor": "#6197FB"
}
相關(guān)推薦
? 【完全指南】vue+vant實(shí)現(xiàn)上拉加載下拉刷新，加速你的頁面響應(yīng)速度文章來源地址http://www.zghlxwxcb.cn/news/detail-507459.html
到了這里，關(guān)于讓你的微信小程序?qū)τ脩舾佑押茫荷侠虞d和下拉刷新就是關(guān)鍵的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
