下拉刷新與上拉加載的使用
下來刷新和上拉加載是一款應(yīng)用中非常常用的兩種功能逢勾，微信小程序直接提供了這兩種功能，下面來看下如何使用粉铐。
- 先在頁面的json文件中添加
"enablePullDownRefresh": true疼约，表示開啟下拉刷新與上拉加載功能。
json.png
- 然后在頁面的js文件中實(shí)現(xiàn)
onPullDownRefresh與onReachBottom方法
// 下拉刷新方法
onPullDownRefresh: function() {
// 顯示標(biāo)題欄進(jìn)度條效果
wx.showNavigationBarLoading();
this.setData({
pageSrc: WATERFALL_SOURCE.source
}, () => {
// 取消標(biāo)題欄進(jìn)度條效果
wx.hideNavigationBarLoading();
// 取消頁面刷新動(dòng)畫
wx.stopPullDownRefresh();
});
},
// 上拉加載方法
onReachBottom: function() {
let _pageNo = this.data.pageNo + 1;
this.setData({
pageNo: _pageNo,
pageSrc: this.data.pageSrc
});
}
微信小程序是默認(rèn)有下拉刷新動(dòng)畫效果的蝙泼，但是沒有上拉加載效果忆谓，上拉加載動(dòng)畫效果需要我們自己實(shí)現(xiàn)。除此之外踱承，小程序還提供在標(biāo)題欄上顯示加載動(dòng)畫的一個(gè)api wx.showNavigationBarLoading();，可以在下拉刷新和上拉加載時(shí)調(diào)用哨免，以此來更加明顯的突顯加載效果茎活，但是不要忘記在刷新或者加載更多后調(diào)用wx.hideNavigationBarLoading()來取消加載動(dòng)畫。
下拉刷新沒有動(dòng)畫效果
小程序的下拉刷新動(dòng)畫是在頁面后顯示三個(gè)閃爍的圓點(diǎn)琢唾，但是有時(shí)會(huì)發(fā)現(xiàn)载荔，頁面下拉刷新時(shí)并沒有出現(xiàn)動(dòng)畫效果。此時(shí)大部分的原因是因?yàn)槟愕闹黝}背景色與文本主題色搭配不當(dāng)導(dǎo)致的采桃。
- 如下設(shè)置懒熙，是無法看到動(dòng)畫效果，因?yàn)楸尘吧c文本色相似
"backgroundColor":"#fff",
"backgroundTextStyle":"light",
- 改成以下設(shè)置普办，則可以看到動(dòng)畫效果
"backgroundColor":"#fff",
"backgroundTextStyle":"dark",
以上設(shè)置可以在app.json中設(shè)置工扎，也可以單獨(dú)在頁面的json文件中設(shè)置。另外衔蹲，小程序的背景色 backgroundColor 是默認(rèn)為白色的肢娘，這點(diǎn)需要注意。
在app.json中設(shè)置
在頁面的json文件中設(shè)置
