实现右边数据的加载渲染： pic.vue 

    1. <template>
    2.     <view class='pics'>
    3.         <scroll-view class='left' scroll-y>
    4.             <view :class="active === index?'active':''" v-for='(item,index) in cates' :key='item.id' @click="leftClickHandle(index,item.id)">{{item.title}}</view>
    5.         </scroll-view>
    7.         <scroll-view class='right' scroll-y>
    8.             <view class='item' v-for='item in secondData' :key='item.id'>
    9.                 <image :src='item.img_url'></image>
    10.                 <text>{{item.title}}</text>
    11.             </view>
    12.             <text v-if='secondData.length === 0'>暂无数据</text>
    13.         </scroll-view>
    14.     </view>
    15. </template>
    17. <script>
    18.     export default {
    19.         data() {
    20.             return {
    21.                 cates:[],
    22.                 active:0,
    23.                 secondData:[]
    24.             };
    25.         },
    26.         methods:{
    27.             async getPicsCate(){
    28.                 const res = await this.$myRequest({
    29.                     url:'/api/getimgcategory'
    30.                 })
    31.                 this.cates = res.data.message
    32.                 this.leftClickHandle(0,this.cates[0][id])
    33.             },
    34.             async leftClickHandle(index,id){   //点击一下就变成高亮
    35.                 this.active = index
    36.                 //console.log(id)
    37.                 //获取右侧的数据
    38.                 const res = await this.$myRequest({
    39.                     url:'/api/getimages/'+id
    40.                 })
    41.                 this.secondData = res.data.message
    44.             }
    45.         },
    46.         onLoad(){
    47.             this.getPicsCate()
    48.         }
    49.         }
    50. </script>
    52. <style lang="scss">
    53. page{
    54.     height:100%;
    55. }
    56. .pics{
    57.     height:100%;
    58.     display: flex;
    59.     .left{
    60.         width:200rpx;
    61.         height:100%;
    62.         border-right:1px solid #eee;
    63.         view{
    64.             height:60px;
    65.             line-height:60px;
    66.             color:#333;
    67.             text-align: center;
    68.             font-size:35rpx;
    69.             border-top:1px solid #eee;
    70.         }
    71.         .active{
    72.             background: $shop-color;
    73.             color:#fff;
    74.         }
    75.     }
    76.     .right{
    77.         height:100%;
    78.         width:530rpx;
    79.         margin:20rpx auto;
    80.         .item{
    81.             image{
    82.                 width:520rpx;
    83.                 height:520rpx;
    84.                 border-radius: 5px;
    85.             }
    86.             text{
    87.                 font-size: 30rpx;
    88.                 line-height: 50rpx;
    89.             }
    90.         }
    91.     }
    93. }
    94. </style>

    image.png