UNIAPP实战项目笔记15 修正重复请求数据

最新推荐文章于 2024-01-29 16:08:46 发布

ggome

最新推荐文章于 2024-01-29 16:08:46 发布

阅读量845

点赞数

分类专栏： uni-app 文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/gixome/article/details/127170499

版权

uni-app 专栏收录该内容

109 篇文章 42 订阅

订阅专栏

修正重复请求数据

每次加载都会自动累加导致页面越来越长，通过状态码来控制是否需要再次加载，通过给对象添加 first 和 last 状态码来记录触及底部，方便后面的触底自动加载的功能

method中的代码

// 添加数据
            initData(res){
                let arr = [];
                for (var i = 0; i < this.topBar.length; i++) {
                    let obj = {
                        data:[],
                        load:"first"
                    }
                    // 获取首次数据
                    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();
                }
            },


// 对应显示不同数据
            addData(){
                // 拿到索引
                let index = this.topBarIndex;
                // 拿到id
                let id = this.topBar[index].id;
                // 请求不同的数据
                uni.request({
                    url:`http://127.0.0.1:3000/api/index_list/${id}/data/1`,
                    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'
            }

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 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 表示一个整体循环 -->
                                </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>
                    </scroll-view>
                    
                </swiper-item>
            </swiper>
            
            
            
            <!-- 推荐模板 -->
            <!-- <IndexSwiper></IndexSwiper>
            <Recommend></Recommend>
            <Card cardTitle='猜你喜欢'></Card>
            <CommodityList></CommodityList> -->
            
            <!-- 其他模板: 运动户外 美妆... -->
            <!-- <Card cardTitle='运动户外'></Card>
            <Banner></Banner>
            <Icons></Icons>
            <Card cardTitle='热销爆品'></Card>
            <Hot></Hot>
            <Card cardTitle='店铺推荐'></Card>
            <Shop></Shop>
            <Card cardTitle="为您推荐"></Card>
            <CommodityList></CommodityList>
            -->
        </view>
        
        <!-- <view class="f-active-color">
            文字
        </view>
        <view class="iconfont icon-xiaoxi"></view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</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"
                    }
                    // 获取首次数据
                    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(){
                // 拿到索引
                let index = this.topBarIndex;
                // 拿到id
                let id = this.topBar[index].id;
                // 请求不同的数据
                uni.request({
                    url:`http://127.0.0.1:3000/api/index_list/${id}/data/1`,
                    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'
            } 
		}
	}
</script>

<style>
.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>