uni-app实现页面分类导航

先上效果图：

 

 

 

看看代码：

<template>
    <view class="list_Box">
        <view class="left">
            <scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
                <view class="item" 
                    v-for="(item,index) in leftArray"
                    :key="index" 
                    :class="{ 'active':index==leftIndex }" 
                    :data-index="index"
                    @tap="leftTap"
                >{{item}}</view>
            </scroll-view>
        </view>
        <view class="main">
            <swiper class="swiper" :style="{ 'height':scrollHeight }" 
                :current="leftIndex" @change="swiperChange"
                 vertical="true" duration="300">
                <swiper-item v-for="(item,index) in mainArray" :key="index">
                    <scroll-view  scroll-y="true" :style="{ 'height':scrollHeight }">
                        <view class="item">
                            <view class="title">
                                <view>
                                <a :href="item.url">{{item.title}}</a>
                                </view>
                                <image :src="item.thumbnail_pic_s" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
                                <image :src="item.thumbnail_pic_s02" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollHeight:'500px',
                leftArray:['生活','娱乐','社会'],
                mainArray:[
                    {
                        "uniquekey": "6c4caa0c3ba6e05e2a272892af43c00e",
                        "title": "杨幂的发际线再也回不去了么？网友吐槽像半秃",
                        "date": "2017-01-05 11:03",
                        "category": "yule",
                        "author_name": "腾讯娱乐",
                        "url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
                        "thumbnail_pic_s": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_1_mwpm_03200403.jpeg",
                        "thumbnail_pic_s02": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_2_mwpm_03200403.jpeg",
                        "thumbnail_pic_s03": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_3_mwpm_03200403.jpeg"
                        }
                ],
                leftIndex:0
            }
        },
        onl oad(){
            /* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
            uni.getSystemInfo({
                success:(res)=>{
                    this.scrollHeight=`${res.windowHeight}px`;
                }
            });
        },
        methods: {
            /* 左侧导航点击 */
            leftTap(e){
                let index=e.currentTarget.dataset.index;
                this.leftIndex=Number(index);
            },
            /* 轮播图切换 */
            swiperChange(e){
                let index=e.detail.current;
                this.leftIndex=Number(index);
            }
        }
    }
</script>

<style lang="scss">
.list_Box{
    display: flex;
    flex-direction: row;
    flex-wrap: Nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    font-size: 28rpx;
    
    .left{
        width: 200rpx;
        background-color: #f6f6f6;
        line-height: 80rpx;
        Box-sizing: border-Box;
        font-size: 32rpx;
        
        .item{
            padding-left: 20rpx;
            position: relative;
            &:not(:first-child) {
                margin-top: 1px;
            
                &::after {
                    content: '';
                    display: block;
                    height: 0;
                    border-top: #d6d6d6 solid 1px;
                    width: 620upx;
                    position: absolute;
                    top: -1px;
                    right: 0;
                    transform:scaleY(0.5);    /* 1px像素 */
                }
            }
            
            &.active,&:active{
                color: #42b983;
                background-color: #fff;
            }
        }
    }
    .main{
        background-color: #fff;
        padding-left: 20rpx;
        width: 0;
        flex-grow: 1;
        Box-sizing: border-Box;
        
        .swiper{
            height: 500px;
        }

        .title{
            line-height: 64rpx;
            font-size: 24rpx;
            font-weight: bold;
            color: #666;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 999;
        }
        
        .item{
            padding-bottom: 10rpx;
        }
        
        .goods{
            display: flex;
            flex-direction: row;
            flex-wrap: Nowrap;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            margin-bottom: 10rpx;
            
            &>image{
                width: 120rpx;
                height: 120rpx;
                margin-right: 16rpx;
            }
            
            .describe{
                font-size: 24rpx;
                color: #999;
            }
            
            .money{
                font-size: 24rpx;
                color: #efba21;
            }
        }
    }
}
</style>