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 } }, onLoad(){ /* 設置當前滾動容器的高，若非窗口的高度，請自行修改 */ 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>