1、html代码:
<div class="tab11">
<div class="tab22" v-for="(item,index) in this.$route.query.pictures" :key="index" >
<img :src="item.url" :alt="index" />
</div>
2、编辑基本的css样式:
.tab11{
overflow-x:auto;
white-space:nowrap;
.tab22{
width:100px;
height:65px;
border-radius:4px;
margin:5px;
display:inline-block;
img{
width:100px;
height:65px;
border-radius:4px;
}
}
}
3 、通过以上的代码就实现了基本的代码样式:
4、关键代码:只需三行行css代码即可实现左右滑动轮播
5、ok,完成左右滑动了,现在动手试试吧!