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>
    23. <script>
    24. export default {
    25. data() {
    26. return {
    27. };
    28. }
    29. }
    30. </script>
    31. <style lang="scss">
    32. page{
    33. height:100%;
    34. }
    35. .pics{
    36. height:100%;
    37. .left{
    38. width:200rpx;
    39. height:100%;
    40. border-right:1px solid #eee;
    41. view{
    42. height:60px;
    43. line-height:60px;
    44. color:#333;
    45. text-align: center;
    46. font-size:35rpx;
    47. border-top:1px solid #eee;
    48. }
    49. .active{
    50. background: $shop-color;
    51. color:#fff;
    52. }
    53. }
    54. }
    55. </style>

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