上拉加载更多

在index.vue里面 加代码，并且调用 {{items.loadtext}}

<swiper-item v-for="(items,index) in newsList" :key="index">
            <scroll-view scroll-y class="list">  <!--scrv -->
                <!-- 图文列表 -->
                <block v-for="(item,index1) in items.list" :key="index1">
                    <index-list :item="item" :index="index1"></index-list>
                </block>
                <!-- 图文列表 -->
                <!-- 上拉加载更多 -->
                <view class="load-more">{{items.loadtext}}</view>
                <!-- 上拉加载更多 -->
            </scroll-view>
        </swiper-item>

 

script 里面

newsList:[
                    {
                        loadtext:"上拉加载更多",
                        list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师111",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                    {
                        loadtext:"上拉加载更多",
                        list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师222",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                    {
                        loadtext:"上拉加载更多",
                        list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师333",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                ],

 

style里面填充样式

    .load-more{
        text-align: center;
        color: #AAAAAA;
        padding: 15upx;
        }

 手机查看显示效果。

 

绑定触底事件。

<swiper-item v-for="(items,index) in newsList" :key="index">
            <scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">  <!--scrv -->
                <!-- 图文列表 -->
                <block v-for="(item,index1) in items.list" :key="index1">
                    <index-list :item="item" :index="index1"></index-list>
                </block>
                <!-- 图文列表 -->
                <!-- 上拉加载更多 -->
                <view class="load-more">{{items.loadtext}}</view>
                <!-- 上拉加载更多 -->
            </scroll-view>
        </swiper-item>

 

添加相关函数

loadmore(index){
                if(this.newsList[index].loadtext != "上拉加载更多"){return;}
                this.newsList[index].loadtext == "加载中";
                
                setTimeout(() => {
                    let obj={
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师888",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        };
                        this.newsList[index].list.push(obj);
                        this.newsList[index].loadtext = "上拉加载更多";
                        
                }, 1000);
                
                //this.newsList.list[index] == "没有更多数据"
            },