左右边栏---小程序

最新推荐文章于 2024-09-23 14:56:18 发布

茴熹

最新推荐文章于 2024-09-23 14:56:18 发布

阅读量57

点赞数

文章标签：小程序前端 vue

本文链接：https://blog.csdn.net/weixin_42407059/article/details/117120017

版权

<template>
   <view class="main">
       
       <scroll-view scroll-y="true" class="left" :scroll-into-view="leftid" >
           <block v-for="(item ,i) in leftdata">
               <view :id="i" :data-myid="item.id" class="scroll-view-item" @tap="getright">{{item.name}}</view>
           </block>
       </scroll-view>
       
       <scroll-view scroll-y="true" class="right" :scroll-into-view="leftid">
           <block >
               <view class="content">
                   <text>{{listdata.txt}}</text>
                   <view v-for="(list,index) in listdata.urlimg" class="box">
                       <image :src="list.img"></image>
                       <text >{{ list.title}}</text>
                   </view>
               </view>
           </block>
       </scroll-view>

</view>
</template>

//点击右边换样式
               console.log(this.$data.leftdata[e.currentTarget.id]);
               this.$data.listdata=this.$data.leftdata[e.currentTarget.id];

           }

}
}
</script>

       .left {
           width: 25%;
           height: auto;
           border-right: 2rpx solid #3F536E;
           background-color: #007AFF;
       }
       .right{
           width:75% ;
           height:auto;
           //background-color: #333333;
           .content{
               width: 100%;
               height:auto;
               .box{
                   display: flex;
width: 33%;
                   margin-right: 1%;
                   display: flex;
                   flex-direction: column;


                   image{
                       width: 100%;
                       height: 150rpx;
                   }
               }
           }
       }