uni-app 下拉刷新

首先在page页面设置enablePullDownRefresh属性

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh":true
            }
        }

 

index.vue

<template>
    <view>
        <view v-for="(item,index) of newList" :key="index" class="newList">
            {{item}}
        </view>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                newList:[]
            }
        },
        onLoad(e) {
            this.getNews()
        },
        onPullDownRefresh() {
            this.getNews()
            //停止加载图标
            
        },
        methods: {
            getNews(){
                uni.showNavigationBarLoading()
                uni.request({
                    url:‘https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page=1‘,
                    success: (res) => {
                        this.newList=res.data.split(‘--hcSplitor--‘)
                        uni.stopPullDownRefresh()
                        uni.hideNavigationBarLoading()
                    }
                })
            }
        }
    }
</script>

<style>
    .newList{
        line-height: 2em;
        padding: 20px;
        
    }
</style>

 

uni-app 下拉刷新

上一篇:Flutter for iOS模拟器环境搭建


下一篇:ASP.NET Core AutoWrapper 自定义响应输出