下拉刷新 uniapp

本文主要是介绍下拉刷新 uniapp，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

整体下拉刷新

<template>
    <view>
        <scroll-view
            scroll-y
            :refresher-threshold="45"
            :refresher-enabled="true"
            :refresher-triggered="refresherTriggered"
            @refresherrefresh="refresherrefresh"
            @refresherrestore="refresherrestore"
            @refresherabort="refresherabort"
        >
            <view>这里是内容</view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            refresherTriggered: false, //下拉刷新状态
            _refresherTriggered: false //防止异步操作
        };
    },
    onl oad() {},
    methods: {
        refresherrefresh() {
            console.log('自定义下拉刷新被触发');
            let _this = this;
            if (_this._refresherTriggered) {
                return;
            }
            _this._refresherTriggered = true;
            //界面下拉触发，triggered可能不是true，要设为true
            if (!_this.refresherTriggered) {
                _this.refresherTriggered = true;
            }
            this.loadStoreData();
        },
        refresherrestore() {
            console.log('自定义下拉刷新被复位');
            let _this = this;
            _this.refresherTriggered = false;
            _this._refresherTriggered = false;
        },
        refresherabort() {
            console.log('自定义下拉刷新被中止    ');
            let _this = this;
            _this.refresherTriggered = false;
            _this._refresherTriggered = false;
        },
        loadStoreData() {
            let _this = this;
            this.listData();
            setTimeout(() => {
                _this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
                _this._refresherTriggered = false;
            }, 1000);
        },
        listData() {
            let _this = this;
            //这里是方法获取数据(第一次请求的数据)
        }
    }
};
</script>

<style>
view {
    text-align: center;
}
.item:nth-child(odd) {
    background-color: antiquewhite;
}
.item:nth-child(even) {
    background-color: aquamarine;
}
</style>

效果图

简单的刷新(很单一)

在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

这篇关于下拉刷新 uniapp的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！