Vue滑动翻页组件swiper的实现---第一版_vue2 swiper滑动页面

作者：你好赵伟 | 2024-07-11 07:21:02

踩

vue2 swiper滑动页面

关于滑动翻页，有很多优秀的插件可以使用，但是多多少少都有点大，所以自己试着完成一个组件来实现。（以左右滑动翻页为例）

1、主要思路

最主要的就是对三个触摸事件的处理：touchstart、touchmove、touchend

在touchstart事件处理程序中记录一些初始值，比如原始坐标；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移；在touchend事件处理程序中计算最终的滑动距离，大于阙值则滑动一整页，小于则回到起始位置。

2、代码实现

页面结构：具体的组件结构和数据传递就不展示了，只列出编译后的HTML结构如下：

基本样式：inline-block用font-size: 0来隐藏间距


<style lang='scss'>
.ths_swiper-wrap {
  white-space: nowrap;
  display: inline-block;
  font-size:

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/809186