UNIAPP实战项目笔记16 上拉加载更多数据

小咪咪 2024-04-03 09:20 71阅读 0赞

### 上拉加载更多数据 ###

> 通过计算来实现页面的增加，每次请求自增页面，获取下一个页面的数据，并将数据累加的页面数据并渲染出来.

*  index.vue 下的 method 中方法

> addData() 和 loadMore()

addData(callback){
        
                    // 拿到索引
                    let index = this.topBarIndex;
                    // 拿到id
                    let id = this.topBar[index].id;
                    
                    let page = Math.ceil(this.newTopBar[index].data.length/5) + 1;
                    console.log(page);
                    // 请求不同的数据
                    uni.request({
        
                        url:`http://127.0.0.1:3000/api/index_list/${
          id}/data/${
          page}`,
                        success: (res) => {
        
                            if(res.statusCode != 200){
        
                                return;
                            }else{
        
                                let data = res.data.data;
                                this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                            }
                            // console.log(data);
                        }
                    })
                    // 请求结束后重新赋值
                    this.newTopBar[index].load = 'last';
                    
                    if(typeof callback === 'function'){
        
                        callback();
                    }
                },
                // 上拉加载更多
                loadMore(index){
        
                    this.newTopBar[index].loadText = '加载中...';
                    
                    // 请求完数据，文字提示信息又换成【上拉加载更多...】
                    this.addData(()=>{
        
                        this.newTopBar[index].loadText = '上拉加载更多...';
                    })
                }

#### 实例图片 下拉加载更多数据 ####

![实例图片][d6ef62fea4b742ada05e00ccba3b651b.png]

*  index.vue 的全部代码
 *  > 一下为首页的代码

<template>
    	<view class="content">
            <view class="index">
                
                <scroll-view scroll-x="true" :scroll-into-view="scrollIntoIndex" class="scroll-content" >
                    <view
                    :id="'top'+index"
                        class="scroll-item"
                        v-for="(item,index) in topBar"
                        :key="index"
                        @tap="changeTab(index)"
                    >
                        <text :class="topBarIndex===index?'f-active-color':'f-color'">{
        {
        item.name}}</text>
                    </view>
                </scroll-view>
                
                <swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px'">
                    <swiper-item
                        v-for="(item,index) in newTopBar"
                        :key="index"
                    >
                        
                        <scroll-view @scrolltolower="loadMore(index)" scroll-y="true" :style="'height:'+clentHeight+'px;'">
                            <block v-if="item.data.length > 0">                            
                                <block v-for="(k,i) in item.data" :key="i">
                                    
                                    <IndexSwiper v-if="k.type==='swiperList'" :dataList='k.data'></IndexSwiper>
                                    <template v-if="k.type==='recommendList'">
                                        <Recommend :dataList='k.data'></Recommend>
                                        <Card cardTitle='猜你喜欢'></Card>
                                        
                                    </template>
                                    
                                    
                                    <Banner v-if="k.type==='bannerList'" :dataList='k.imgUrl'></Banner>
                                    
                                    <template v-if="k.type==='iconsList'">
                                        <Icons :dataList='k.data'></Icons>
                                        <Card cardTitle="热销商品"></Card>
                                    </template>
                                    
                                    <template v-if="k.type==='hotList'">
                                        <Hot :dataList='k.data'></Hot>
                                        <Card cardTitle="推荐店铺"></Card>
                                    </template>
    
                                    <template v-if="k.type==='shopList'">
                                        <Shop :dataList='k.data'></Shop>
                                        <Card cardTitle="为您推荐"></Card>
                                    </template>
                                    
                                    <CommodityList v-if="k.type==='commodityList'" :dataList='k.data'></CommodityList>
                                    
                                
                                </block>
                            </block>
                            <view v-else>
                                暂无数据...
                            </view>
                            <view class="load-text f-color">
                                {
        {
        item.loadText}}
                            </view>
                        </scroll-view>
                        
                    </swiper-item>
                </swiper>
                
                
                
                
                
                
                
                
            </view>
            
            
    	</view>
    </template>
    
    <script>
        import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
        import Recommend from '@/components/index/Recommend.vue';//引入
        import Card from '@/components/common/Card.vue';//引入
        import CommodityList from '@/components/common/CommodityList.vue';//引入
        import Banner from '@/components/index/Banner.vue';//引入
        import Icons from '@/components/index/Icons.vue';//引入
        import Hot from '@/components/index/Hot.vue';//引入
        import Shop from '@/components/index/Shop.vue';//引入
    	export default {
        
    		data() {
        
    			return {
        
                    // 选中的索引
                    topBarIndex:0,
                    // 顶栏跟随的索引id值
                    scrollIntoIndex:'top0',
                    // 内容块的高度
                    clentHeight:0,
                    // 顶栏数据
                    topBar:[],
                    // 承载数据
                    newTopBar:[],
    				title: 'Hello'
    			}
    		},
            components:{
        
                IndexSwiper, //注册
                Recommend,
                Card,
                CommodityList,
                Banner,
                Icons,
                Hot,
                Shop
                
            },
    		onLoad() {
        
                // 请求接口数据
                this.__init();
                
    		},
            onReady() {
         // 初步渲染完后执行
                uni.getSystemInfo({
        
                    success: (res) => {
        
                        // console.log(res);
                        // 可视区域高度 减去头部高度
                        this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
                    }
                })
                /* let view = uni.createSelectorQuery().select(".home-data"); // 获取dom节点对象
                // 获取节点对象数据
                view.boundingClientRect(data=>{
                    // 动态获取内容块的高度,动态渲染swiper高度
                    // 不要去试图计算可视区域的高度,在ios下有bug
                    this.clentHeight = 2000;
                    // this.clentHeight = data.height;
                }).exec(); */
                // this.getClientHeight();
    		},
    		methods: {
        
                // 请求首页数据
                __init(){
        
                    uni.request({
        
                        url:"http://127.0.0.1:3000/api/index_list/data",
                        success: (res) => {
        
                            // console.log(res.data.data);
                            let data = res.data.data;
                            this.topBar = data.topBar;
                            this.newTopBar = this.initData(data);
                        }
                    })
                },
                // 添加数据
                initData(res){
        
                    let arr = [];
                    for (var i = 0; i < this.topBar.length; i++) {
        
                        let obj = {
        
                            data:[],
                            load:"first",
                            loadText:"上拉加载更多..."
                        }
                        // 获取首次数据
                        if (i==0) {
        
                            obj.data = res.data
                        }
                        arr.push(obj)
                    }
                    return arr;
                },
                // 点击顶栏
                changeTab(index){
        
                    if (this.topBarIndex === index) {
        
                        return;
                    }
                    this.topBarIndex = index
                    this.scrollIntoIndex = 'top'+index
                    
                    // 每一次滑动 load赋值为first
                    if(this.newTopBar[this.topBarIndex].load == 'first'){
        
                        this.addData();
                    }
                },
                // 对应滑动
                onChangeTab(e){
        
                    this.changeTab(e.detail.current)
                },
                // 获取可视区域高度【兼容】
                getClientHeight(){
        
                    const res = uni.getSystemInfoSync();
                    console.log(res.platform,res.statusBarHeight);
                    const system = res.platform;
                    if ( system === 'iso') {
        
                        return 44 + res.statusBarHeight;
                    }else if( system === 'android' ){
        
                        return 48 + res.statusBarHeight;
                    } else{
        
                        return 0;
                    }
                },
                // 对应显示不同数据
                addData(callback){
        
                    // 拿到索引
                    let index = this.topBarIndex;
                    // 拿到id
                    let id = this.topBar[index].id;
                    
                    let page = Math.ceil(this.newTopBar[index].data.length/5) + 1;
                    console.log(page);
                    // 请求不同的数据
                    uni.request({
        
                        url:`http://127.0.0.1:3000/api/index_list/${
          id}/data/${
          page}`,
                        success: (res) => {
        
                            if(res.statusCode != 200){
        
                                return;
                            }else{
        
                                let data = res.data.data;
                                this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                            }
                            // console.log(data);
                        }
                    })
                    // 请求结束后重新赋值
                    this.newTopBar[index].load = 'last';
                    
                    if(typeof callback === 'function'){
        
                        callback();
                    }
                },
                // 上拉加载更多
                loadMore(index){
        
                    this.newTopBar[index].loadText = '加载中...';
                    
                    // 请求完数据，文字提示信息又换成【上拉加载更多...】
                    this.addData(()=>{
        
                        this.newTopBar[index].loadText = '上拉加载更多...';
                    })
                }
    		}
    	}
    </script>
    
    <style>
    
    .load-text{
        
        border-top: 2rpx solid #636263;
        line-height: 60rpx;
        text-align: center;
    }
    .scroll-content{
        
        width: 100%;
        height: 80rpx;
        white-space: nowrap;
    }
    .scroll-item{
        
        display: inline-block;
        padding: 10rpx 30rpx;
        font-size: 32rpx;
    }
    .f-active-color{
        
        padding: 10rpx 0;
        border-bottom: 6rpx solid #49BDFB;
    }
    .index{
        
        width: 100%;
    }
    .content {
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .logo {
        
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
    
    .text-area {
        
        display: flex;
        justify-content: center;
    }
    
    .title {
        
        font-size: 36rpx;
        color: #8f8f94;
    }
    </style>

#### 后端接口的数据页面 ####

> 数据请求页面

[d6ef62fea4b742ada05e00ccba3b651b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/17df17ca90044c31a893c23824794f73.png