UNIAPP实战项目笔记14 修复可视区域高度问题滑动不同板块展示不同数据

小鱼儿 2024-04-03 09:01 10阅读 0赞

### 修复可视区域高度问题 ###

*  通过设置小程序和 iso 安卓APP 不同系统做兼容

> app端会默认加入刘海屏高度，计算减去此高度即可

// 获取可视区域高度【兼容】
                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;
                    }
                },

> 可以参看下面的index.vue 的整体代码

### 滑动不同板块展示不同数据 ###

#### 各组件设置为可传递数据参数 ####

*  hot.vue

> 热门组件

<template>
        <view class="hot">
            <Commodity :dataList="dataList" itemW='250rpx' bigH="250rpx"></Commodity>
        </view>
    </template>
    
    <script>
        import Commodity from '../common/Commodity.vue'
        export default{
        
            props:{
        
                dataList:Array
            },
            data(){
        
                return {
        
                    /*  */
                }
            },
            components:{
        
                Commodity
            }
        }
    </script>
    
    <style>
    </style>

*  banner.vue

> banner组件

<template>
        <view class="banner">
            <image class="banner-img" :src="dataList" mode=""></image>
        </view>
    </template>
    
    <script>
    export default{
        
        props:{
        
            dataList:String
        }
    }
    </script>
    
    <style lang="scss">
    .banner{
        
        width: 100%;
        height: 300rpx;
    }
    .banner-img{
        
        width: 100%;
        height: 300rpx;
    }
    </style>

*  shop.vue

> 推荐店铺组件

<template>
        <view class="shop">
            <view class="shop-item" v-for="(item,index) in dataList" :key="index">
                <view class="shop-big">
                   <image class="shop-big" :src="item.bigUrl" mode=""></image> 
                </view>
                <scroll-view class="scroll-content" scroll-x="true" >
                    <view class="scroll-item">
                        <Commodity 
                        :dataList="item.data"
                        wrap='no-wrap'
                        itemW="200rpx"
                        bigH="200rpx"
                        nameSize="20rpx"
                        ></Commodity>
                    </view>
                </scroll-view>
            </view>
        </view>
    </template>
    
    <script>
    import Commodity from '../common/Commodity.vue'
    export default{
        
        props:{
        
            dataList:Array
        },
        data(){
        
            return{
        
                /* shopList:[
                    {
                        id:1,
                        imgUrl:"../../static/logo.png",
                        name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                        pprice:"299",
                        oprice:"659",
                        discount:"5.2"
                    },
                    {
                        id:2,
                        imgUrl:"../../static/logo.png",
                        name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                        pprice:"299",
                        oprice:"659",
                        discount:"5.2"
                    },{
                        id:3,
                        imgUrl:"../../static/logo.png",
                        name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                        pprice:"299",
                        oprice:"659",
                        discount:"5.2"
                    },
                    {
                        id:4,
                        imgUrl:"../../static/logo.png",
                        name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                        pprice:"299",
                        oprice:"659",
                        discount:"5.2"
                    }
                ] */
            }
        },
        components:{
        
            Commodity
        }
    }
    </script>
    
    <style lang="scss">
    .shop-big{
        
        width: 100%;
        height: 350rpx;
    }
    .scroll-content{
        
        width: 100%;
        white-space: nowrap;
        height: 350rpx;
    }
    .scroll-item{
        
        display: inline-block;
        width: 300rpx;
        height: 300rpx;
    }
    </style>

*  icons.vue

> 宫格组件

<template>
        
        <view class="icons">
            <view class="icons-item" v-for="(item,index) in dataList" :key="index">
                <image class="icons-img" :src="item.imgUrl" mode=""></image>
                <text class="icons-name f-color">{
        {
        item.name}}</text>
            </view>
            
        </view>
    </template>
    
    <script>
    export default{
        
        props:{
        
            dataList:Array
        }
    }
    
    </script>
    
    <style lang="scss">
    .icons{
        
        display: flex;
        flex-wrap: wrap;
    }
    .icons-item{
        
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 20rpx;
    }
    .icons-img{
        
        width: 110rpx;
        height: 110rpx;
    }
    </style>

*  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>
                                    
                                    
                                    <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>
                
                
                
                
                
                
                
                
            </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:[]
                        }
                        // 获取首次数据
                        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
                    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) => {
        
                            let data = res.data.data;
                            // console.log(data);
                            this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
                        }
                    })
                } 
    		}
    	}
    </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>

#### 自定义服务器接口 ####

*  服务器数据接口更改

> index.js  
> 保存后重启服务器哈

##### 以下为接口文档 #####

二、 首页分类数据  
1.1 接口功能

> 获取首页分类数据

1.2 URL

> 地址 /api/index\_list/栏目的 id/data/数量

1.3 支持格式

> JSON

1.4 HTTP 请求方式

> GET

1.5 请求参数

> | 参数 | 必选 | 类型 | 说明 |

1.6 返回字段

<table> 
 <thead> 
  <tr> 
   <th align="center">返回字段</th> 
   <th align="center">字段类型</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">code</td> 
   <td align="center">string</td> 
   <td align="center">返回结果状态 0：正常；1：错误</td> 
  </tr> 
  <tr> 
   <td align="center">data</td> 
   <td align="center">object</td> 
   <td align="center">首页数据</td> 
  </tr> 
 </tbody> 
</table>

1.7 接口实例

{
        
    	"code":"0",
    	"data":{
        
    		topBar:[
    			{
        
    				id: 1,
    				name: '推荐'
    			}
    			....
    		],
    		data:[
    			{
        
    				type:"swiperList",
    				data:[
    					{
        
    						imgUrl:'../../static/img/swiper1.png'
    					}
    				]
    			}
    		]
    	},
    }