移动端触摸滑动插件swiper使用方法以及踩坑

最新推荐文章于 2024-10-11 11:41:44 发布

wcy7916

最新推荐文章于 2024-10-11 11:41:44 发布

阅读量1.2w

点赞数 6

分类专栏： vs2017 jquery ios 文章标签： swiper js

本文链接：https://blog.csdn.net/wcy7916/article/details/87357007

版权

jquery 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

ios

9 篇文章 0 订阅

订阅专栏

vs2017

2 篇文章 0 订阅

订阅专栏

swiper 官网地址：https://3.swiper.com.cn/
使用方法：

html:

//引入相关文件
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <link href="~/Content/css/jingtingdang/swiper.min.css" rel="stylesheet" />
    <link href="~/Content/css/jingtingdang/animate.min.css" rel="stylesheet" />
    <title></title>
</head>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/js/jingtingdang/swiper.jquery.min.js"></script>
    <script src="~/Content/js/jingtingdang/swiper.animate.min.js"></script>

js:

//页面加载完成后，初始化Swiper组件：
$(document).ready(function () {
    var mySwiper = new Swiper('.swiper-container', {
        autoHeight: true,                   //enable auto height 
        pagination: '.swiper-pagination',  //显示页数
        mode: 'horizontal',                // 横向滑屏
        paginationType: 'custom',         //自定义页数显示方式
        paginationCustomRender: function (swiper, current, total) {
            return current;
        },
        spaceBetween: 22,             //每页相隔的距离
        slidesPerView: 1,                
        loop: true,                           //无限循环
        effect: 'coverflow',              //3D效果    
        grabCursor: true,                //鼠标覆盖Swiper时指针会变成手掌形状
        centeredSlides: true,            //true时，活动块会居中，而不是默认状态下的居左。
        sidesPerView: 'auto',
        loopedSlides: 50,    //loop模式下使用slidesPerview: 'auto'，还需使用该参数设置所要用到的loop个数(一般设置为本来slide的个数) 。
        coverflow: {                    //动画参数，官网的效果不是我需要的，我不需要y轴旋转
            rotate: 0,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: false,
        },
       //~~~~~解决 手机上横向滑动的时候出现卡顿的bug  start~~~~~~~~
        observer: true,                  //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,            //修改swiper的父元素时，自动初始化swiper
        touchRatio: 1,                   //解决滑动卡顿
        longSwipesRatio:0.1,
        threshold: 10,                   //如果触摸距离小于该值滑块不会被拖动
        followFinger:false,  
       //~~~~~解决 手机上横向滑动的时候出现卡顿的bug end~~~~~~~~
       
        //swiper从一个slide过渡到另一个slide结束时执行
        onSlideChangeEnd: function (swiper) {
            swiper.update(); //swiper更新
        },
    });
})

question1：

当swiper-slide的页数太多（超过20页），在ios上就会出现闪退或者重复加载的bug。（qq闪退，微信重加载）

solution1：

页面滑动的时候，只显示需要显示的页，将肉眼不可见的页面都隐藏。(一开始我用的display:none;发现页面样式错乱，于是换成了visibility:hidden;)
注意：我设置的loop:true,循环播放模式，导致swiper.activeindex不准确，显示的不是当前页的Index,
应该使用swiper.realIndex.

        //过渡开始时触发
        onTransitionStart: function (swiper) {
            //解决页数太多导致ios闪退bug
            for (var i = 0; i <= swiper.loopedSlides; i++) {
                if (i == swiper.realIndex - 1 || i == swiper.realIndex || i == swiper.realIndex + 1) {
                    $(".swiper-slide[data-swiper-slide-index=" + i + "]").css("visibility", "visible");
                } else {
                    $(".swiper-slide[data-swiper-slide-index=" + i + "]").css("visibility", "hidden");
                }
            }
        },

原型页面：
在这里插入图片描述

question2：

部分ios和android机上左右滑动时会卡顿

solution2：

经过查找，是3D动画效果导致的，所以，去掉如下代码即可

                // 此效果导致部分ios和android滑动卡顿
                // effect: 'coverflow', //3D效果
                // coverflow: { //动画
                //     rotate: 0,
                //     stretch: 10,
                //     depth: 60,
                //     modifier: 2,
                //     slideShadows: false,
                // },

question3：

在这里插入图片描述
由于卡片较多，图片部分使用的是swiper组件的懒加载模式.但是只有一张卡片的情况下，点击今日阅读进行异步请求数据，返回到卡片页，进行页面切换，会出现数据加载了，图片不加载的情况。

solution3：

因为图片地址是绑定在data-src属性上的，但是页面显示的是src的地址。只有一张卡片的情况下，不显示src属性。所以加了个判断

 //只有一张卡片，不使用图片懒加载
<img class="bookImg" v-if="bookInfoList.today_index===0" :src="chapterTask.cover_picture" :imgIndex="first" @click="getFirstArticle(chapterTask)">
//有多张卡片，使用图片懒加载
 <img class="bookImg swiper-lazy" v-if="bookInfoList.today_index!==0"  :data-src="chapterTask.cover_picture" :key="chapterTask.cover_picture" @click="getFirstArticle(chapterTask)">

question4：

在loop:true的情况下，只有当天卡片的点击事件有效，其他的卡片，点击事件无效

solution4：

去掉loop效果

// loop效果会导致卡片点击事件失效
 // slidesPerView: 1, //slider容器能够同时显示的slides数量(loop模式)。
 // loop: true, //无限循环
 // loopedSlides: _self.tabDatelist.length, //loop模式下使用slidesPerview: 'auto'，还需使用该参数设置所要用到的loop个数(一般设置为本来slide的个数)

question5：

ios移动端滑动几张卡片后，使用系统默认的右滑返回上一页，会与swiper的滑动动画进行冲突

solution5：

1.添加swiper属性

 iOSEdgeSwipeDetection: true, //设置为true开启IOS的UIWebView环境下的边缘探测。如果拖动是从屏幕边缘开始则不触发swiper。

2.滑动的时候，地址栏的路由也是会动态变化的，比如地址是 http:XXXXX?各种参数#/tasks/2 （/tasks/2代表tasks页面的第二张卡片），修改路由的时候要将 $r o u t e r . p u s h 改成$ router.replace,就不会向历史记录里面新增一条记录了

   //添加当前卡片路由，并删除历史记录（debug ios侧滑返回）
   if (window.location.hash.indexOf('tasks') > -1 || window.location.hash === '#/') {
       _self.$router.replace({
           path: '/tasks/' + getIndex
       });
   }