商城二级分类列表

二级分类列表

左侧列表代码

右侧列表代码

获取当前窗口可用高度,调用产品分类接口和商品列表接口,特别注意当前选中的类目下标初始值为-1

<template>
    <view class="container">
        <!-- 左侧(可滚动):商品类目 -->
        <!-- 竖直滚动视图必须指定height,否则它会把屏幕的高度撑起来 -->
        <scroll-view class="left-view" scroll-y="true" :style="{height: winHeight+'px'}" >
            <uni-list>
                <!-- clickable:  让列表项可以点击,开启点击反馈 -->
                <!-- link:让列表项可以点击,开启点击反馈,并在右侧添加向右箭头 -->
                <uni-list-item
                 v-for="(c,i) in categoryList"
                 :key="i" 
                 :title="c.cname" 
                 :style="{backgroundColor:i===curCategory?'#fff':'#eee'}"
                 @click="curCategory=i"
                 clickable
                />
            </uni-list>
        </scroll-view>
        
        <!-- 右侧(可滚动):该类目下的商品列表 -->
        <scroll-view class="right-view" scroll-y :style="{height: winHeight+'px'}">
            <view>
                <uni-list>
                    <!-- ellipsis:省略号,指定一个数字,显示多少行后开始启用省略号 -->
                    <!-- thumbnail:缩略图 -->
                    <uni-list-item 
                        v-for="(p,i) in plist" 
                        :key="i"
                        :title="p.title"
                        :ellipsis="2"
                        link
                        :thumb="$base+p.pic"
                        thumbSize="lg"
                        :to="`/pages/details/details?pid=${p.lid}`"
                    />
                </uni-list>
                <text v-show="plist.length===0">没有查询到相关商品</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { productCategory, productList } from '../../servies'

    export default {
        data() {
            return {
                winHeight:0,        //屏幕中内容可用区域的高度
                categoryList:[],    //商品类目列表
                curCategory: -1,     //当前选中的类目下标
                //注意:此处的-1初始值非常有意义,语义正确了,便于后续watch监视数据改变
                plist:[],    //当前选中类别下的商品列表
            }
        },
        async onLoad(){
            //页面挂载时,1-获取当前窗口可用的高度
            // let info1 = uni.getWindowInfo()   //执行效率更高,无需异步处理,只兼容H5/App/微信小程序
            // console.log(info1);
            // let info2 = uni.getSystemInfoSync()  //执行效率更低,可同步或异步处理,信息更丰富,各类小程序兼容性更好
            // console.log(info2);
            let{windowHeight} = uni.getSystemInfoSync()
            this.winHeight = windowHeight
            //页面挂载时,2-异步请求服务器端所有的商品类别
            let data = await productCategory()
            //console.log(data);
            //this.categoryList = data    //说明:服务器端返回的数据只有9条,为了呈现效果,拼接2次
            this.categoryList = [...data,...data]
            this.curCategory = 0     //修改"当前选中的类目下标"为0(即第一个)
            
        },
        watch:{
            async curCategory(){
                //console.log('当前选中的类别下标改变了:',this.curCategory);
                //获取当前选中的类别对应的商品查询关键字
                let kw = this.categoryList[this.curCategory].keywords
                let body = await productList(1,kw)
                this.plist = body.data
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss">
.container{
    display: flex;
    .left-view{
        width: 94px;   //左侧宽度固定
    }
    .right-view{
        flex: 1;      //右侧宽度增长权重
    }
}
</style>