uniapp下拉刷新

https://i.cnblogs.com/posts/edit       uniapp地址。

 

第一步  需要在page.json中配置  enablePullDownRefresh   字段，分为全局配置和页面配置。

 

<template>
    <view>
        <view class="on_pull_t">
            onPullDownRefresh   下拉刷新
        </view>
        <view class="_c" v-for="(item,index) in list" :key="index">
            {{item}}
        </view>
        
        <button @click="onPullDownRefresh_handle">调用下拉刷新</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[
                    "HTML",
                    "CSS",
                    "JavaScript",
                    "Jquery",
                    "Vue",
                    "React",
                    "wechart"
                ]
            }
        },
        onLoad(params){
            console.log("页面参数",params);
        },
        //拉下刷新监听
        onPullDownRefresh(){
            setTimeout(()=>{
                this.list = [
                    "Taro",
                    "Uniapp",
                    "Weapp",
                    "MINA",
                    "..."
                ];
                uni.stopPullDownRefresh();
            },2000)
        },
        methods: {
            //调用拉下刷新动作。
            onPullDownRefresh_handle(){
                uni.startPullDownRefresh();
                setTimeout(()=>{
                    this.list = [
                        "Taro",
                        "Uniapp",
                        "Weapp",
                        "MINA",
                        "..."
                    ];
                    uni.stopPullDownRefresh();
                },2000)
            }
        }
    }
</script>

<style>
    .on_pull_t{
        text-align: center;
        color: red;
    }
</style>