移动端效果之swiper

最新推荐文章于 2022-12-23 19:44:23 发布

萌萌的卡洛奇

最新推荐文章于 2022-12-23 19:44:23 发布

阅读量1.7k

点赞数

分类专栏： javascript 移动开发文章标签： webapp 效果 swiper

本文链接：https://blog.csdn.net/yuzhongzi81/article/details/78181438

版权

本文探讨了移动端Swiper组件的实现原理，从页面初始化、触摸开始、触摸移动到触摸结束的整个过程，详细解释了如何处理滑动事件以实现平滑的页面切换效果。在初始化阶段，设置默认显示的子页面；在触摸开始时，阻止不必要的默认行为和事件传播；在触摸移动过程中计算滑动位移；最后在触摸结束时，根据位移执行相应的动画，确保用户体验流畅。

摘要由CSDN通过智能技术生成

写在前面

最近在做移动端方面运用到了饿了么的vue前端组件库，因为不想单纯用组件而使用它，故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理，有兴趣的可以关注下。

swiper

代码在这里：戳我

1. 说明

父容器overflow:hidden;，子页面transform:translateX(-100%);width:100%;

2. 核心解析

2.1 页面初始化

由于所有页面都在手机屏幕左侧一个屏幕宽度的位置，因此最开始的情况是页面中看不到任何一个子页面，所以第一步应该设置应该显示的子页面，默认情况下defaultIndex:0

function reInitPages() {
   
    // 得出页面是否能够被滑动
    // 1. 子页面只有一个
    // 2. 用户手动设置不能滑动 noDragWhenSingle = true
    noDrag = children.length === 1 && noDragWhenSingle;

    var aPages = [];
    var intDefaultIndex = Math.floor(defaultIndex);
    var defaultIndex = (intDefaultIndex >= 0 && intDefaultIndex < children.length) 
        ? intDefaultIndex : 0;

    // 得到当前被激活的子页面索引
    index = defaultIndex;

    children.forEach(function(child, index) {
   
        aPages.push(child);
        // 所有页面移除激活class
        child.classList.remove('is-active');

        if (index === defaultIndex) {
            // 给激活的子页面加上激活class
            child.classList.add('is-active');
        }
    });

    pages = aPages;
}

2.2 容器滑动开始(onTouchStart)

在低版本的android手机上，设置event.preventDefault()会起到一定的性能提升作用，使得滑动起来不是那么卡。

前置工作：

如果用户设置了 prevent:true，滑动时阻止默认行为
如果用户设置了stopPropagation:true，滑动时阻止事件向上传播
如果动画尚未结束，阻止滑动
设置dragging:true，滑动开始
设置用户滚动为false

滑动开始：

使用一个全局对象记录信息，这些信息包括：

dragState = {
    startTime           // 开始时间
    startLeft           // 开始的X坐标
    startTop            // 开始的Y坐标(相对于整个页面viewport pageY)
    startTopAbsolute    // 绝对Y坐标(相对于文档顶部 clientY)
    pageWidth           // 一个页面宽度
    pageHeight          // 一个页面的高度
    prevPage            // 上一个页面
    d