UNIAPP实战项目笔记24 商品分类获取高度和点击添加样式商品分类对应数据渲染

青旅半醒 2024-04-03 10:18 93阅读 0赞

### 商品分类获取高度和点击添加样式 ###

### 商品分类对应数据渲染 ###

### 接口数据整理并渲染 ###

> 将读取到接口的数据,分类成两个数据;LeftData和rightData  
> 用onReady生命周期自动获取并计算 可是区域高度  
> list.vue

<template>
        <view class="">
            <Lines />
            <view class="list">
                
                <scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px'">
                    <view 
                        v-for="(item,index) in leftData"
                         @tap="changeLeftTab(index,item.id)" 
                         class="left-item"
                     >
                        <view 
                            class= "left-name"
                            :class='activeIndex===index?"left-name-active":""'
                        >{
        {
        item.name}}</view>
                    </view>
                </scroll-view>
                
                <scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px'">
                    <view 
                        class="right-list" 
                        v-for="(item,index) in rightData"
                        :key="index"
                    >
                        <block v-for="(k,i) in item">
                            <view class="list-title">{
        {
        k.name}}</view>
                            <view class="right-content">
                                <view class="right-item" v-for="(j,idx) in k.list">
                                    <image class="right-img" :src="j.imgUrl" mode=""></image>
                                    <view class="right-name">
                                        {
        {
        j.name}}
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                </scroll-view>
            </view>
        </view>
    </template>
    
    <script>
        import $http from '@/common/api/request.js'
        import Lines from "@/components/common/Lines.vue"
        export default {
        
            data() {
        
                return {
        
                    clentHeight:0,
                    activeIndex:0,
                    // 左侧数据
                    leftData:[],
                    rightData:[],
                }
            },
            components:{
        
                Lines
            },
            onLoad() {
        
                this.getData();
            },
            onReady() {
         // 初步渲染完后执行
                // 获取可视高度
                uni.getSystemInfo({
        
                    success: (res) => {
        
                        // 可视区域高度 减去头部高度
                        this.clentHeight = res.windowHeight - this.getClientHeight();
                    }
                })
    		},
            methods: {
        
                // 请求数据方法
                getData(id){
        
                    if(id === this.activeIndex+1){
        
                        return;
                    }
                    $http.request({
        
                        url:'/goods/list'
                    }).then((res)=>{
        
                        let leftData = [];
                        let rightData = [];
                        res.forEach(v=>{
        
                            leftData.push({
        
                                id:v.id,
                                name:v.name
                            })
                            // 如果点击的id值相投
                            if(v.id=== (this.activeIndex+1)){
        
                                rightData.push(v.data);
                            }
                        })
                        this.leftData = leftData;
                        this.rightData = rightData;
                        console.log(rightData);
                    }).catch(()=>{
        
                        uni.showToast({
        
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                },
                
                // 获取可视区域高度【兼容】
                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;
                    }
                },
                // 左侧点击事件
                changeLeftTab(index,id){
        
                    this.getData(id);
                    this.activeIndex = index;
                },
            },
            // input 输入框dia点击事件
            onNavigationBarSearchInputClicked() {
        
                uni.navigateTo({
        
                    url:'/pages/search/search'
                })
            }
        }
    </script>
    
    <style lang="scss">
    .list{
        
        display: flex;
    }
    .list-left{
        
        width: 200rpx;
    }
    .left-item{
        
        border-bottom:2rpx solid #ffffff;
        font-size: 28rpx;
        font-weight: bold;
        background-color: #F7F7F7;
    }
    .left-name{
        
        padding: 30rpx 6rpx;
        text-align: center;
    }
    .left-name-active{
        
        border-left:8rpx solid #49bdfb;
        background-color: #ffffff;
    }
    .list-right{
        
        flex: 1;
    }
    .list-title{
        
        font-weight: bold;
        padding: 30rpx 0;
    }
    .right-content{
        
        display: flex;
        flex-wrap: wrap;
    }
    .right-item{
        
        width: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10rpx;
    }
    .right-name{
        
        padding:16rpx 0;
    }
    .right-img{
        
        width: 150rpx;
        height: 150rpx;
    }
    </style>

### 实例效果图 ###

![商品分类页渲染数据][ec18b68583e34096aaa0956fa7913ce8.png]

### 后端接口文件 ###

> index.js

#### 目录结构 ####

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

[ec18b68583e34096aaa0956fa7913ce8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/09cfb2dd682d4fb0b7ed03338a3ae228.png