uni-app 上拉加载更多

当滚动条滚动到最底端实现加载。

利用onReachBottom监听方法

①下拉监听方法

onReachBottom: function(){//上拉加载监听方法
            this.getMoreNews();
            if(timer!=null){clearTimeout(timer);}
            timer=setTimeout(function(){
                _self.getMoreNews();
            },5000);
        },

②请求更多方法

getMoreNews:function(){
                //判断是否已经加载全部
                if(_self.loadingTxt=='已经加载全部'){return false;}
                _self.loadingTxt='加载中';
                //显示加载中动画
                uni.showNavigationBarLoading();
                //请求数据
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        uni.hideNavigationBarLoading();
                        if(res.data==null){
                            _self.loadingTxt='已经加载全部';
                            return false;
                        }
                        var newsList=res.data.split('--hcSplitor--');
                        _self.newsList=_self.newsList.concat(newsList);
                        //成功获取数据后结束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功获取数据后隐藏加载动画
                        uni.hideNavigationBarLoading();
                        page++;
                        _self.loadingTxt='加载更多';
                    }
                })
            }

全部代码：

<template>
    <view >
        <!-- 轮播图 -->
        <swiper indicator-dots="true" autoplay="true" >
            <swiper-item>
                <image src="/static/logo.png"></image>
            </swiper-item>
            <swiper-item>2</swiper-item>
            <swiper-item>3</swiper-item>
        </swiper>
        <!-- 显示数据 -->
        <view v-for="(item,index) in newsList" class="newlist">
        {{item}}
        </view>
        <!-- 加载视图 -->
        <view class="loading">{{loadingTxt}}</view>
    </view>
</template>

<script>
    var _self,page=1,timer=null;
    export default {
        data() {
            return{
                loadingTxt: '加载更多',
                newsList: []
            }
        },
        onLoad:function(){//初始化加载
            this.getNews();
            _self=this;
        },
        onPullDownRefresh:function(){//下拉刷新监听方法
            this.getNews();
        },
        onReachBottom: function(){//上拉加载监听方法
            this.getMoreNews();
            if(timer!=null){clearTimeout(timer);}
            timer=setTimeout(function(){
                _self.getMoreNews();
            },5000);
        },
        methods:{
            getNews:function(){
                page=1;
                //显示加载中动画
                uni.showNavigationBarLoading();
                //请求数据
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        var newsList=res.data.split('--hcSplitor--');
                        _self.newsList=newsList;
                        //成功获取数据后结束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功获取数据后隐藏加载动画
                        uni.hideNavigationBarLoading();
                        page++;
                    }
                })
            },
            getMoreNews:function(){
                //判断是否已经加载全部
                if(_self.loadingTxt=='已经加载全部'){return false;}
                _self.loadingTxt='加载中';
                //显示加载中动画
                uni.showNavigationBarLoading();
                //请求数据
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        uni.hideNavigationBarLoading();
                        if(res.data==null){
                            _self.loadingTxt='已经加载全部';
                            return false;
                        }
                        var newsList=res.data.split('--hcSplitor--');
                        _self.newsList=_self.newsList.concat(newsList);
                        //成功获取数据后结束下拉刷新
                        uni.stopPullDownRefresh();
                        //成功获取数据后隐藏加载动画
                        uni.hideNavigationBarLoading();
                        page++;
                        _self.loadingTxt='加载更多';
                    }
                })
            }
            
            
        }
    }
</script>

<style>
swiper-item{
    background: #00FF00;
    height: 200px;
    width: 100%;
}
.newlist{
    line-height: 2em;
    padding:20px;
}
.loading{
    line-height: 2em;
    text-align: center;
    color:#888;
    margin-top: 30px;
}
</style>

以上代码解决了：下拉刷新和上拉加载，并动态追加数据和延迟加载等细节。