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 一起,并成为前端三大主流框 ...
随机推荐
- 2016noipday1t1玩具迷题结题报告
经常读这个代码有益于比赛时想起一些思路.... day1t1,洛谷dalao称之为水题...??然后我去年还是没拿到分,就这个,我还就写了40%的数据,AC到40,然而这不是关键,注释了freopen ...
- Hnoi2013题解 bzoj3139~3144
话说好久没写题(解)了.. 先贴份题解:http://wjmzbmr.com/archives/hnoi-2013-%E9%A2%98%E8%A7%A3/(LJ神题解..Lazycal表示看不懂..) ...
- 【前缀和】【分类讨论】hdu5163 Taking Bus
#include<cstdio> using namespace std; int T,n,m,x,y; long long sum[100001],ans,d[100001]; int ...
- 【字符串哈希】【BKDRhash】【Rabin-Karp算法】模板
#include<cstdio> #include<iostream> #include<cstring> #include<string> #incl ...
- linux之cat,more,less,head,tail
http://lionbule.iteye.com/blog/663549 1.cat # cat /etc/profile 注:查看/etc/目录下的profile文件内容: # cat -b /e ...
- Inno Setup入门(十三)——Pascal脚本(2)
事件函数(2) function CheckPassword(Password: String): Boolean; 如果安装程序在Pascal 脚本中发现该函数,它自动显示密码页并调用CheckPa ...
- [Java基础] Java多线程-工具篇-BlockingQueue
转载自: http://www.cnblogs.com/jackyuj/archive/2010/11/24/1886553.html 前言: 在新增的Concurrent包中,BlockingQue ...
- linux基础-第十八单元_nginx部署
一.基本环境配置 1.1.安装常用软件 yum install wget -y 1.2.Install yum repo mv /etc/yum.repos.d/CentOS-Base.repo /e ...
- 深度增强学习--Policy Gradient
前面都是value based的方法,现在看一种直接预测动作的方法 Policy Based Policy Gradient 一个介绍 karpathy的博客 一个推导 下面的例子实现的REINFOR ...
- kafka启动报错:kafka.common.KafkaException: Failed to acquire lock on file .lock
kafka 异常退出后重启时遇到的问题 解决: 执行 netstat -lnp|grep 9092 在执行结果中找到进程号执行 kill -9 进程号再尝试启动Kafka