Vue vue-awesome-swiper 的坑
1、在vertical的场景模式下,默认的高度很奇怪,非常非常的大。完全没有规律。后来使用autoHeight好了一点。但依然有问题,问题在于它会根据swiper-slide内元素的高度自动变化叠加。依然会非常非常大。最后才知道。手动设置height即可解决。由于我的场景是fullpage页面,所以只需要设置height : window.innerHeight 即可。完整代码如下:
swiperOption: {
          direction : 'vertical',
          height : window.innerHeight,
          onTransitionStart: function (swiper){
                this.isHideIcon = swiper.activeIndex <= 3;
          }.bind(this)
}
2、在拖拽的过程中,我还发现另一个bug。有时候拖拽边缘。会导致没有很好的弹性滚动,而是像普通页面一样滑动导致错误了。后来检查才发现,是因为你手势滑动的区域不是<swiper>元素覆盖的范围导致的。解决方案很简单,整个页面都让swiper覆盖即可。保证用户触碰的是swiper元素本身,而不是body、或者其他div元素
Vue vue-awesome-swiper 的坑的更多相关文章
- vue脚手架使用swiper /引入js文件/引入css文件
		1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ... 
- 记录vue中一些有意思的坑
		记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ... 
- Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
		前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ... 
- Vue发布过程中遇到坑,以及webpack打包优化
		前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ... 
- vue中的swiper element ui
		欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ... 
- vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件
		vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ... 
- Javascript - Vue - vue对象
		vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ... 
- Vue - vue.js 常用指令
		Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ... 
- 前端开发 Vue  Vue.js和Nodejs的关系
		首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ... 
- [Vue] : Vue概述
		什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ... 
随机推荐
- 模板—数据结构—LCT
			模板—数据结构—LCT Code: #include <cstdio> #include <algorithm> using namespace std; #define N ... 
- java.lang.NoSuchMethodError: org.springframework.beans.factory.xml.XmlReaderContext.getResourceLoader()Lorg/springframework/core/io/ResourceLoader
			问题原因 在整合spring跟struts2是使用Maven,用到struts2-spring-plugin.jar,但是maven不但但加载了这个jar文件还有spring-beans:3.0.5. ... 
- IDEA的Maven项目找不到class
- luogu P1802 5倍经验日
			题目背景 现在乐斗有活动了!每打一个人可以获得5倍经验!absi2011却无奈的看着那一些比他等级高的好友,想着能否把他们干掉.干掉能拿不少经验的. 题目描述 现在absi2011拿出了x个迷你装药物 ... 
- luogu P1194 买礼物
			题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第I样东西,再买第J样,那么就可以只花K[I,J]元,更 ... 
- 【动态规划】bzoj1270 [BeijingWc2008]雷涛的小猫
			暴力dp是n^2*m的……我们计算每棵树在每层的答案的时候,都需要计算出从那棵树转移过来最优. 但是我们发现,对一棵树而言,从上面转移过来都是一样的,所以我们可以在计算每棵树在每层的答案的时候,先预处 ... 
- cocos2d-x引擎优化 修改记录
			3.13 一些无聊的bug etc1 在android 平台不能正常显示,包括 cc.Button,setGray,clipeNode 3.13.1优化记录 7月 2.公式计算改为长整型, ... 
- 使用IDEA创建package
			1)使用IDEA创建java工程 什么也不选,直接点击Next 无脑继续下一步 点击“Finish”完成工程的创建. 2)在使用IDEA创建了工程之后,首先选中“src”文件夹,然后 紧接着输入包名 ... 
- Scala实战高手****第10课:Scala继承彻底实战和Spark源码鉴赏
			isInstanceOf 和 asInstanceOf is用于判断 as用于转换,把父类类型转换成子类类型 getClass 具体找出类型 
- iOS:GitHub上值得关注的iOS开源项目
			1.AFNetworking地址:https://github.com/AFNetworking/AFNetworking用于网络请求 2.JSONKit地址:https://github.com/j ... 
