美文网首页
关于如何去实现一个swiper组件

关于如何去实现一个swiper组件

作者: cb12hx | 来源:发表于2017-07-10 18:38 被阅读0次

    先上效果图,第一个是自动播放,第二个是手滑播放,到最后一页自动跳转到第一页,手滑时,第一页或者最有一页会有弹簧效果

    ![swipe2.gif](https://img.haomeiwen.com/i5087999/9e8fe5acb0a1aeb1.gif?imageMogr2/auto-orient/strip)

    毕竟是qq截屏,没那么高保真,有点影响视觉,请忽略
    来讲讲实现思路,首先,监听三个事件,touchstart,touchmove,touchend
    在touchstart时,记住这个点,把它保存起来,然后touchmove时,计算当前点与start点的距离,把这个值赋给swipe,就实现了滚动的效果;touchend时,判断当前的位移是否已经达到了切换的阈值,然后再进行判断是否切换;
    以上就是基本思路,来谈谈细节
    1.怎么去实现位移,此处使用transform;
    2.切换和到始末页时,怎么去实现动画与弹簧的效果,此处用到的是transition,在move时,需要将transition置为null,不然不会跟着手指动,end的时候再把transition加上去,具体代码我就不多谢了,有空可以去看看我的github monkeyCompoents
    组件需要的属性
    1.threshold 切换的阈值
    2.duration:动画的时间
    3.isLoop:是否支持循环
    4.data:数据对象,如下

    [
          {
            url: 'https://www.baidu.com',
            img: 'http://img.zcool.cn/community/01903955448a250000019ae9351fcc.jpg@2o.jpg'
          },
          {
            url: 'https://www.163.com',
            img: 'http://img.zcool.cn/community/01aa2056e7aba96ac72558850d314b.jpg'
          },
          {
            url: 'https://www.qq.com',
            img: 'http://img.zcool.cn/community/01fa00574ea43732f875a4296255ae.jpg'
          },
          {
            url: 'https://www.sina.com.cn',
            img: 'http://img2.yiihuu.com/upimg/seonews/2016/07/15/01c4eb5747bebf6ac72525ae7d6e98.jpg'
          }
        ]
    

    相关文章

      网友评论

          本文标题:关于如何去实现一个swiper组件

          本文链接:https://www.haomeiwen.com/subject/oljuhxtx.html