短視訊商城系統，自動更改每次下拉後的重新整理動畫

短視訊商城系統，自動更改每次下拉後的重新整理動畫

第一步：在pages.json 裡面加下圖的一句話。然後重新整理頁面之後只要往下拉。

{
"path": "pages/shop/home", //vue商城首頁
"style": {
"navigationBarTitleText": "商城首頁",
"navigationBarBackgroundColor": "#56D5FF",
"enablePullDownRefresh": true,
"app-plus": {
}
}
},

第二步。此時動畫有了可是不能及時的收回。所以要在當前頁面做一些其它的配置讓體驗更好一些。

onLoad(){
//1.剛進入頁面的時候就載入這個動畫
uni.startPullDownRefresh();
},
// 2.下拉重新整理
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
uni.stopPullDownRefresh();
// 這裡放重新整理資料的方法
}, 1000);
},

第三步。預設下拉的動畫圈圈是綠色的。如果不喜歡可以更改。

還是要在pages.json裡面的進行一個簡單的配置。

{
"path": "pages/shop/home", //vue商城首頁
"style": {
"navigationBarTitleText": "商城首頁",
"navigationBarBackgroundColor": "#56D5FF",
"enablePullDownRefresh": true,
"app-plus": {
                "pullToRefresh": {
                        "support": true,
                        "color": "#000000", //小圈圈的顏色
                        "style": "circle" //小圈圈的樣式
                    }
}
}
},

以上就是短視訊商城系統，自動更改每次下拉後的重新整理動畫， 更多內容歡迎關注之後的文章