swiper4使用教程-填坑
本篇博客用于记录使用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使用教程-填坑的更多相关文章
- Node填坑教程——前言
Node是什么? Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物 ...
- Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑
----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...
- bootstrap-table填坑之旅<一>认识bootstrap-table
应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- Android Tips – 填坑手册
出于: androidChina http://www.androidchina.net/3595.html 学习 Android 至今,大大小小的坑没少踩,庆幸的是,在强大的搜索引擎与无私奉献的 ...
- MySQL 5.7版本安装教程-踩坑总结
下载 MySQL下载地址 选择下载64位(看自己电脑是32位还是64位) 点击下载之后,它会让你登录,没有Oracle账户,跟着它的步骤注册一个就好了. 安装 打开下载好的压缩包解压到你的某一目录下, ...
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
- Vue2.0 新手完全填坑攻略——从环境搭建到发布
Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
随机推荐
- JPA、Hibernate、Spring-Data-Jpa的本质区别
什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支持 ...
- Android sensor架构分析
一.其主要框架如下图所示: 二.sensor的JNI层:android_hardware_SensorManager.cpp (frameworks\base\core\jni) 注册JN ...
- vulnhub: DC 2
首先地址探测找到主机IP: root@kali:~# nmap -sn 192.168.74.139/24 Starting Nmap 7.80 ( https://nmap.org ) at 202 ...
- spring bean注册和实例化
1.左边3个接口定义了基本的Ioc容器的2.HierarchicalBeanFactory增加了getParentBeanFactory()具备了双亲Ioc的管理能力3.ConfigurableBea ...
- [BUGCASE]前端码案概述
中医有医案之说,程序会出bug,因此想到将自己在项目中遇到的疑难bug记录下来的想法,出于以下目的: 沉淀经验 通过问题学习 训练解决问题的能力 训练文档写作能力 取名:码案(Bug Case). 医 ...
- Mellanox 4036配置
1.前言 内置factory-default 会重置所有参数到出厂设置. 内置reboot.拔电源就是重启. 外置reset就是重置芯片中数据,不会恢复到出厂设置. 2.感受下恢复出厂过程 4036- ...
- C语言printf()函数的格式化字符串
原文链接:https://www.runoob.com/cprogramming/c-function-printf.html#include<stdio.h> #include<s ...
- 总结一下 php连接oracle,完全可用。
大致有两种方法 第一种 开启php_pdo_oci扩展,一般集成环境都会有这个扩展. 这个东西还是比较简单的,去官网查看吧 http://php.net/manual/zh/book.pdo.php ...
- 去除openwrite.cn博客验证码限制
相信有的小伙伴肯定遇到过如下这种情况,但是作为老白嫖党肯定是 「下次一定」 了,所以今天我们来看看如何不关注公众号实现 「阅读原文」. 如何解决呢? 1.通过 F12 打开控制台,切换至 Elemen ...
- 20191225_关于sql中exists和not exists
exists n. 存在量词(exist的复数)v. 存在:出现:活着(exist的三单形式) 理所当然 not exists 就是不存在 那么 if exists 就是表示它引导的子句有结果集返回 ...