vue轮播滑动时指示器跟着变

发布网友发布时间：2022-04-20 14:31

共1个回答

热心网友时间：2022-05-14 21:45

可以编写代码
老规矩，写JS代码前咱们先理清交互逻辑：页面渲染开始，首先把所有子组件挂载到DOM上，当所有子节点挂载好了后初始化父组件同理，当轮播组件销毁的时候先销毁子组件，再销毁父组件初始化的时候需要：获取父组件容器DOM节点、以及父组件节点的宽获取到所有子组件节点给所有子节点依次设置好初始坐标给父节点绑定touch事件初始化完成后，当手指触摸到屏幕瞬间，记录当前手指起始的坐标当手指移动的过程中，阻止页面中的默认事件，根据当前坐标以及起始坐标计算手指X、Y轴移动的距离如果X轴移动比Y轴多则判断手指在横向移动，否则为竖向移动如果横向移动则移动子项中的位置，修改所有子项的坐标手指离开屏幕的时候判断手指移动总距离，如果大于一个临界值则轮播切换到下一屏或者上一屏（根据滑动方向判定），否则重置会原始状态
go函数用来做轮播切换的效果。我们在写代码的过程中，可以先定义一个函数来做某个事情，然后再后面用代码来实现逻辑，这样的咱们写代码过程中的思路就会很清晰。接下来实现go函数：
到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。