uni-app 下拉刷新 上拉加载

原文：uni-app 下拉刷新 上拉加载 - 秃了头也不退休 - 博客园首先在page页面设置enablePullDownRefresh属性 激活下拉 { "path": "pages/index/index", "styhttps://www.cnblogs.com/lxz-blogs/p/12599475.html看了后，确实可以，随保存，便于查阅。

首先在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 class="loading">{
   
   {loadingTxt}}</view>
    </view>
</template>

<script>
let page=1,timer=null
    export default {
        data() {
            return {
                newList:[],
                loadingTxt:'加载更多'
            }
        },
        onLoad(e) {
            this.getNews()
        },
        onPullDownRefresh() {
            //下拉的生命周期
            this.getNews()
        },
        onReachBottom() {
            //阻止重复加载
            if(timer !== null){
                clearTimeout(timer)
            }
            timer=setTimeout(()=>this.getMoreNews(),500)
            // this.getMoreNews()
        },
        methods: {
            //下拉刷新事件
            getNews(){
                page=1
                //标题读取样式激活
                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()
                        page++
                    }
                })
            },
            //加载更多的新闻
            getMoreNews(){
                this.loadingTxt='加载中'
                uni.showNavigationBarLoading()
                uni.request({
                    url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page='+page,
                    success: (res) => {
                        if(res.data===null){
                            this.loadingTxt="已经加载全部"
                            return
                        }
                        this.newList=this.newList.concat(res.data.split('--hcSplitor--'))
                        // this.newList=[...this.newList,res.data.split('--hcSplitor--')]
                        //停止下拉样式
                        uni.stopPullDownRefresh()
                        //隐藏标题读取
                        uni.hideNavigationBarLoading()
                        page++
                    }
                })
            },
        }
    }
</script>

<style>
    .newList{
        line-height: 2em;
        padding: 20px;
    }
    .loading{
        line-height: 2em;
        text-align: center;
        color: #888;
        margin-top: 30rpx;
    }
</style>