这种类型的移动端轮播怎么做？或者写成vue组件的思路是？

Question

在app内经常能看到这种类型的轮播图，不知道在移动端web页面上怎么实现呢？

最近写移动端都是基于vue的，不知道如果需要封装成一个vue的组件，又是一种怎么写的思路呢？

Answer 1

说一下个人思路：

要进行封装组件，首先考虑清楚组件的功能是什么，那些需要外部传递，那些需要自身实现，以题主的为例

1. 一切都是组件，那么该轮播组件需要外部提供一些数据过来： 图片列表，切换回调，宽高

2. 轮播组件自身需要实现就是使用传递进来的图片，宽高来进行数据渲染，布局

3. 此外考虑到扩展性，轮播组件还需要提供动态设置某个图片，或者跳到指定图片上去

说下技术实现点：

1. 我会用Vue组件来实现

2. vue之间通信方式有事件，还有props，这里推荐使用props进行传值

Answer 2

这种轮播，感觉用Vue做并无优势，还不如直接操作DOM来的实在；
1.Vue实现之前需要扩展触控事件指令或者插件；
2.封装一个组件出来，轮播的原理跟传统的一样，只是直接操作DOM，换成了操作数据而已；