本篇博客用于记录使用swiper插件中的一些关键点:

首先附上官网地址:https://www.swiper.com.cn/

ios中使用swiper的坑:

/*解决swiper中苹果点击变暗,在css中加入下面这段*/
* {
outline: none;
webkit-focus-ring-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-overflow-scrolling : touch;
}

长屏滚动实现 填坑参考:

//这个swiper创建的是长屏滚动效果,重要的一点是,该对象的swiper-slide样式的height要设为auto!
var swiperObj = new Swiper ('.swiper-container', {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
mousewheelControl: true,
roundLengths : true,
on:{
touchMove: function(event){
},
touchEnd: function(event){
},
touchStart:function(event){
//this代表当前,如果页面中有多个.swiper-container,则swiperObj为数组。
//swiperObj是个单独对象时,this可以换成该对象名字
//下面两行用来解决滑动过程中,点击可停止。
this.setTransition(0)
this.setTranslate(this.getTranslate());
},
transitionEnd: function(){
//下面的判断通常用来监听页面箭头提示,滑到底部隐藏
if(this.isEnd){
$('.arrowImg').hide();
}else{
$('.arrowImg').show();
}
},
}
})

初始化swiper时:如果该页面是display等于none的状态,那么在该页面显示时可以调用  swiper.update()方法激活,页面宽高变化时,也可以调用update()来激活。

swiper做成长页面滑动时,swiper.setTranslate(0)可以回到顶部。

跳转到swiper中的某一屏:swiper.slideTo(index, speed, runCallbacks):

index num 必选 指定将要切换到的slide的索引
speed num 可选 切换速度(单位ms)
runCallbacks boolean 可选 设置为false时不会触发transition回调函数

swiper滚动条的设置:

注意:如果swiper里面有输入框,弹起输出法又弹下后滚动条位置不归位,尝试把滚动条的那个dom元素放到swiper-container元素之外,并且更新滚动条对应样式。

<div class="swiper-scrollbar"></div>
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 2%;
top: 2%;
z-index: 50;
width: 2.8px;
height: 100%;
background-color: #616161;
opacity: 0.7 !important;
} .swiper-scrollbar-drag{
width: 100%;
left: 0;
background: rgba(255,255,255,0.6);
var swiperObj = new Swiper ('.swiperBox', {
direction: 'vertical',
scrollbar: {
el: '.swiper-scrollbar',
},
slidesPerView: 'auto',
freeMode: true,
mousewheelControl: true,
roundLengths : true,
on:{
touchMove: function(event){
},
touchEnd: function(event){
},
touchStart:function(event){
//this代表当前,如果页面中有多个.swiper-container,则swiperObj为数组。
//swiperObj是个单独对象时,this可以换成该对象名字
//下面两行用来解决滑动过程中,点击可停止。
this.setTransition(0)
this.setTranslate(this.getTranslate());
} }
})

最重要的是:  多查文档   https://www.swiper.com.cn/api/index.html

注意:loop设为true的情况,可能会出现swiper中一些事件失效问题,索引也可能被打乱,这个要慎用。

loop为true解决参考:

  loop为true代表可循环滚动,这时候插件就会创建若干个slide块来补位让滑动衔接,通常slide的数量就增多了。

  部分slide块中元素事件失效,也许是因为该块slide是swiper复制补位的,但并未把事件带过去,解决方法可以用标签绑定。

  <div onclick='method()'></div>,事件写到标签上,swiper复制出来的slide也拥有该事件属性,slide中块的索引和属性,也可以写在标签上,data-index='1'。

  this.activeIndex值出现变动,可以考虑用this.realIndex,结合实际的值去测试,也可以用数组索引去操作:

  var slideArr = $('.swiper-slide');

  slideArr[0].find('.obj').addClass('layer');

swiper4使用教程-填坑的更多相关文章

  1. Node填坑教程——前言

    Node是什么? Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物 ...

  2. Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑

    ----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...

  3. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

  4. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  5. Android Tips – 填坑手册

    出于: androidChina   http://www.androidchina.net/3595.html 学习 Android 至今,大大小小的坑没少踩,庆幸的是,在强大的搜索引擎与无私奉献的 ...

  6. MySQL 5.7版本安装教程-踩坑总结

    下载 MySQL下载地址 选择下载64位(看自己电脑是32位还是64位) 点击下载之后,它会让你登录,没有Oracle账户,跟着它的步骤注册一个就好了. 安装 打开下载好的压缩包解压到你的某一目录下, ...

  7. Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记

    公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...

  8. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

  9. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

随机推荐

  1. JPA、Hibernate、Spring-Data-Jpa的本质区别

    什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支持 ...

  2. Android sensor架构分析

      一.其主要框架如下图所示:     二.sensor的JNI层:android_hardware_SensorManager.cpp (frameworks\base\core\jni) 注册JN ...

  3. vulnhub: DC 2

    首先地址探测找到主机IP: root@kali:~# nmap -sn 192.168.74.139/24 Starting Nmap 7.80 ( https://nmap.org ) at 202 ...

  4. spring bean注册和实例化

    1.左边3个接口定义了基本的Ioc容器的2.HierarchicalBeanFactory增加了getParentBeanFactory()具备了双亲Ioc的管理能力3.ConfigurableBea ...

  5. [BUGCASE]前端码案概述

    中医有医案之说,程序会出bug,因此想到将自己在项目中遇到的疑难bug记录下来的想法,出于以下目的: 沉淀经验 通过问题学习 训练解决问题的能力 训练文档写作能力 取名:码案(Bug Case). 医 ...

  6. Mellanox 4036配置

    1.前言 内置factory-default 会重置所有参数到出厂设置. 内置reboot.拔电源就是重启. 外置reset就是重置芯片中数据,不会恢复到出厂设置. 2.感受下恢复出厂过程 4036- ...

  7. C语言printf()函数的格式化字符串

    原文链接:https://www.runoob.com/cprogramming/c-function-printf.html#include<stdio.h> #include<s ...

  8. 总结一下 php连接oracle,完全可用。

    大致有两种方法 第一种 开启php_pdo_oci扩展,一般集成环境都会有这个扩展. 这个东西还是比较简单的,去官网查看吧 http://php.net/manual/zh/book.pdo.php ...

  9. 去除openwrite.cn博客验证码限制

    相信有的小伙伴肯定遇到过如下这种情况,但是作为老白嫖党肯定是 「下次一定」 了,所以今天我们来看看如何不关注公众号实现 「阅读原文」. 如何解决呢? 1.通过 F12 打开控制台,切换至 Elemen ...

  10. 20191225_关于sql中exists和not exists

    exists n. 存在量词(exist的复数)v. 存在:出现:活着(exist的三单形式) 理所当然 not exists 就是不存在 那么 if  exists 就是表示它引导的子句有结果集返回 ...