1. <template>
    2.     <view class='pics'>
    3.         <scroll-view class='left' scroll-y>
    4.             <view class='active'>家居生活</view>
    5.             <view>家居生活</view>
    6.             <view>家居生活</view>
    7.             <view>家居生活</view>
    8.             <view>家居生活</view>
    9.             <view>家居生活</view>
    10.             <view>家居生活</view>
    11.             <view>家居生活</view>
    12.             <view>家居生活</view>
    13.             <view>家居生活</view>
    14.             <view>家居生活</view>
    15.             <view>家居生活</view>
    16.             <view>家居生活</view>
    17.             <view>家居生活</view>
    18.             <view>家居生活</view>
    19.             <view>家居生活</view>
    20.         </scroll-view>
    21.     </view>
    22. </template>
    24. <script>
    25.     export default {
    26.         data() {
    27.             return {
    29.             };
    30.         }
    31.     }
    32. </script>
    34. <style lang="scss">
    35. page{
    36.     height:100%;
    37. }
    38. .pics{
    39.     height:100%;
    40.     .left{
    41.         width:200rpx;
    42.         height:100%;
    43.         border-right:1px solid #eee;
    44.         view{
    45.             height:60px;
    46.             line-height:60px;
    47.             color:#333;
    48.             text-align: center;
    49.             font-size:35rpx;
    50.             border-top:1px solid #eee;
    51.         }
    52.         .active{
    53.             background: $shop-color;
    54.             color:#fff;
    55.         }
    56.     }
    58. }
    59. </style>

    实现了左边导航栏的部分功能：
    image.png