其他分享
首页 > 其他分享> > 短视频商城系统,自动更改每次下拉后的刷新动画

短视频商城系统,自动更改每次下拉后的刷新动画

作者:互联网

短视频商城系统,自动更改每次下拉后的刷新动画

第一步:在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" //小圈圈的样式
                    }
}
}
},

以上就是短视频商城系统,自动更改每次下拉后的刷新动画, 更多内容欢迎关注之后的文章

 

标签:动画,style,更改,下拉后,刷新,pages,商城,首页
来源: https://www.cnblogs.com/yunbaomengnan/p/16134967.html