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因为 ...
随机推荐
- 虚拟机、ip地址
使用的系统 虚拟机:VMware workstations+win10:注:系统装好后先切换成Administrator,给VMware装VMware Tools linux发行版本 rhel-se ...
- Python_入门第一篇【持续更新...】
1.准备 准备电脑 和 分区 1.准备配置稍高的电脑(后后期需要装虚拟机),分辨率1920*1080 2.分区: C→系统 D→Project E→软件安装盘 F→其他 准备编辑器 1.Sublime ...
- 03、MyBatis 映射文件
1.XML映射器 2.select Select元素来定义查询操作 Id:唯一标识符 - 用来引用这条语句,需要和接口的方法名一致 parameterType:参数类型 - 可以不传,MyBatis会 ...
- 面试半年!三面阿里,四面蚂蚁金服,居然倒在了一个Java集合之Map上?
Map接口 Map与Collection并列存在.用于保存具有映射关系的数据:key-valueMap中的key和value都可以是任何引用类型的数据Map中的key用set来存放,不允许重复,即同一 ...
- 03python开发之流程控制
03 python开发之流程控制 目录 03 python开发之流程控制 3 流程控制 3.1 流程判断之if判断 3.1.1 代码块 3.1.2 if判断基础语法 3.1.3 案例 3.1.4 if ...
- CorelDRAW复制及镜面反转对象
复制的设计都是由简单的图案和基础的操作堆砌而成的,如何恰当地使用这些基础操作,就是各位新学者要格外注意的地方. 这次我们介绍CorelDRAW中的复制和镜面操作. 一.复制 1.复制单个对象 使用Co ...
- 如何将多个网页合并成一个PDF文件
pdfFactory是一款PDF虚拟打印软件,但与其他虚拟打印机软件不同的是,它使用起来更加简单高效.由于无需Acrobat就能生成Adobe PDF文件,它可以帮助用户在系统没有连接打印机的情况下, ...
- CleanMyMac X是如何进行Mac文件清理的
Mac系统进行文件清理,一般是直接将文件拖动入"废纸篓"回收站中,然后通过清理回收站,就完成了一次文件清理的操作,但是这么做并无法保证文件被彻底删除了,有些文件通过一些安全恢复手段 ...
- vulnhub: DC 9
信息收集: root@kali:/opt/test# nmap -A -v 192.168.76.137 Starting Nmap 7.80 ( https://nmap.org ) at 2020 ...
- Debian10快速部署DHCP服务
前言 DHCP(动态主机配置协议)是一个局域网的网络协议.指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码. 进日,想提升一下自己的技术水平,于是就做 ...