微信小程序swiper-dot如何修改点为滑块操作详细教程？

本文共计1064个文字，预计阅读时间需要5分钟。

目录 + 背景 + 目标效果 + 思路 + 实现 + Swiper 监听 change 事件 + 自定义 dot 模块 + 事件中的逻辑处理 + 总结 + 本文字主要介绍如何基于现有的组件（例如微信小程序的 swiper，以及我们平时 H5 用的 Swiper）实现类似功能。

目录

• 背景
• 目标效果
• 思路
• 实现
• swiper监听change
• 自定义dot模块
• change事件中的逻辑
• 写在最后

本文主要介绍如何基于已有的组件（比如微信小程序的swiper，还有我们平时h5用的比较多的swiper.js等），实现一个滑块样式的指示面板。demo基于小程序，但是逻辑通用。

背景

最近要做一个新的小程序，在首页部分有一个swiper模块，因为设计同学的出色发挥😭，让我在枯燥的开发中得到了些许快乐。他们将swiper中指示面板中的点，改成了一个滑块，说实话，老老实实整成一排点它不香么，哈哈哈哈。但是我宠他~

目标效果

整体来看很简单。主要是下边的滑块需要花一些功夫。整理需求之后需要实现的功能点如下：

• 滑块需要有一个自然的滑动效果。
• 滑块需要跟着滑动方向滑动。