uni-app implement page Category Navigation

First on renderings:

 

 

 

Look at the code:

<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: [' Life ' , ' entertainment ' , ' social ' ], 
                mainArray: [ 
                    { 
                        " uniqueKey " : " 6c4caa0c3ba6e05e2a272892af43c00e " ,
                         " title " : " Yang Mi hairline never go back Tucao what users like half bald? " ,
                         " 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 
            } 
        }, 
        the onLoad () { 
            / * set the current high rolling container, the height of the window if not, modify the self * / 
            uni.getSystemInfo ({ 
                Success: (RES) => {
                     the this.scrollHeight = `$ {} res.windowHeight px`; 
                } 
            }); 
        }, 
        Methods: { 
            / * left navigation click * / 
            leftTap (E) { 
                the let index = e.currentTarget.dataset.index;
                 the this .leftIndex = Number The (index); 
            }, 
            / * carousel FIG switching * / 
            swiperChange (E) { 
                the let index = e.detail.current;
                 the this .leftIndex = Number The (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>