下拉刷新 uniapp


uniapp有多钟下拉刷新方式,这里只要说两种(整体下拉、非整体下拉)

整体下拉刷新





效果图

简单的刷新(很单一)

在pages.json文件中开启下拉刷新

{
            "path": "pages/user/withdrawals/withdrawal-records",
            "style": {
                "navigationBarTitleText": "提现记录",
                "enablePullDownRefresh": true,
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#55aa00", //小圈圈的颜色
                        "style": "circle" //小圈圈的样式
                    }
                }
            }

        }

在生命周期中加入

onLoad() {
        // 刚进入页面的时候就加载这个动画
        uni.startPullDownRefresh();
    },

下拉刷新

onPullDownRefresh() {
        this.loadingType = 4;
        this.pageNum = 1;
        this.withdrawalsList = [];
        this.getWithdrawalsrecording();
    },

在请求数据结束后关掉动画

uni.stopPullDownRefresh();

效果图

下面推荐一款uniapp加载动画(觉得比较好看)

打开动画

uni.showNavigationBarLoading();

关闭动画

uni.hideNavigationBarLoading();

效果图

上拉加载效果请前往

https://www.cnblogs.com/ckfeng/p/16088559.html