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 一起,并成为前端三大主流框 ...
随机推荐
- MySQL数据库增删改字段(属性)
MySQL数据库的各种操作今天在这里总结一下: 一.增加 1.在已有的表中添加新的字段: 首先是增加表的字段,比如一张表原本没有字段“ Time ”,现在我们要增加这样一个字段,可以用下面的SQL语句 ...
- UVA Phone List (字典树)(查询是否有前缀或自身是其他的前缀)
Phone List Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16341 Accepted: 5228 Descr ...
- Linux空硬盘从分区到挂载
(1).临时挂载: [root@CentOS6 桌面]# fdisk /dev/sdb Device contains neither a valid DOS partition table, nor ...
- 设计模式-设计原则(Design Principle)
本文由@呆代待殆原创,转载请注明出处. 写在前面:所谓设计原则并不是一定要遵守的法则,只是一种建议,因为保持这些原则本身会有一定代价,若是这些代价超过了带来的好处就得不偿失了,所以一切还是以简单为准. ...
- QTWebKit之QWebView学习
QWebView是一个simple web 浏览器 一般打开页面的方法为: app = QtGui.QApplication(sys.argv) web = QWebView() web.load(Q ...
- [SHOI2009] 交通网络
简单最短路计数. #include<bits/stdc++.h> #define ll long long using namespace std; #define D double co ...
- [BZOJ2753]滑雪与时间胶囊
第一问直接把可以走的边连起来bfs一遍即可 第二问可以用类似kruskal的方法,只不过排序的依据应该变为第一关键字为终点高度(从大到小),第二关键字为边权(从小到大),只排序可以走的边 因为同样高度 ...
- 找出分数最高的前两个学生 Exercise05_09
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出分数最高的前两个学生 * */ public class Exerci ...
- [转][译] 分分钟学会一门语言之 Python 篇
Python was created by Guido Van Rossum in the early 90's. It is now one of the most popularlanguages ...
- HttpClient 处理中文乱码
HttpClient 请求的中文乱码问题 相关类库: commons-codec-1.3.jar,commons-httpclient-3.1.jar,commons-logging-1.1.1.ja ...