本篇文章主要介绍了用vue写一个仿简书的轮播图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1.先展示最终效果： 2.解决思路 Vue的理念是以数据驱动视图，所以拒绝通过改变元素的margin-top来实现滚动效果。写好css样式，只需改变每张图片的class即可实现轮播效果。动画效果交给transition完成。可以将轮播图看成两个（mainSlide和extraSlide），各个图片的位置如图所示： 3.代码实现 各个slide的样式： $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px;