api的应用

    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 @click='previewImg(item.img_url)' :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.                 //console.log(this.cates)
    33.                 this.leftClickHandle(0,this.cates[0]['id'])
    34.             },
    35.             async leftClickHandle(index,id){   //点击一下就变成高亮
    36.                 this.active = index
    37.                 //console.log(id)
    38.                 //获取右侧的数据
    39.                 const res = await this.$myRequest({
    40.                     url:'/api/getimages/'+id
    41.                 })
    42.                 this.secondData = res.data.message
    45.             },
    46.             previewImg(current){
    47.                 const urls = this.secondData.map(item=>{
    48.                     return item.img_url
    49.                 })
    50.                 //console.log(urls)
    51.                 uni.previewImage({
    52.                     current,
    53.                     urls  //键和数值一样可以缩写
    54.                 })
    55.             }
    56.         },
    57.         onLoad(){
    58.             this.getPicsCate()
    59.         }
    60.         }
    61. </script>
    63. <style lang="scss">
    64. page{
    65.     height:100%;
    66. }
    67. .pics{
    68.     height:100%;
    69.     display: flex;
    70.     .left{
    71.         width:200rpx;
    72.         height:100%;
    73.         border-right:1px solid #eee;
    74.         view{
    75.             height:60px;
    76.             line-height:60px;
    77.             color:#333;
    78.             text-align: center;
    79.             font-size:35rpx;
    80.             border-top:1px solid #eee;
    81.         }
    82.         .active{
    83.             background: $shop-color;
    84.             color:#fff;
    85.         }
    86.     }
    87.     .right{
    88.         height:100%;
    89.         width:530rpx;
    90.         margin:20rpx auto;
    91.         .item{
    92.             image{
    93.                 width:520rpx;
    94.                 height:520rpx;
    95.                 border-radius: 5px;
    96.             }
    97.             text{
    98.                 font-size: 30rpx;
    99.                 line-height: 50rpx;
    100.             }
    101.         }
    102.     }
    104. }
    105. </style>

    image.png