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 一起,并成为前端三大主流框 ...
随机推荐
- Golang基础入门
Go语言很容易上手 第一步,在你的计算机上安装Go语言环境 首先下载对应操作系统的安装包或者源文件 Windows和Mac OSX 都有安装包,可以选择直接双击安装,很简单 Ubuntu系统可以使用 ...
- HDU 6313: Hack it
Hack It Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- 微信小程序开发教程(三)项目目录及文件构成
第二章我们已经创建了一个Hello WXapplet示例小程序.我们从文件目录结构来了解Hello WXapplet项目的构成. 目录结构显示,在小程序项目的根目录下面包含3个app开头的文件(app ...
- [Contest20180318]求和
题意:求$\sum\limits_{i=1}^n\sum\limits_{j=1}^i\sum\limits_{k=1}^i(i,j,k)$ 先令$f(n)=\sum\limits_{i=1}^n\s ...
- 【第二类Stirling数】Gym - 101147G - The Galactic Olympics
如果K>n,就无解: 如果K==n,就答案是P(n,n): 如果K<n,答案就是s(n,K)*P(K,K): P为排列数,s为第二类斯特林数. 第二类斯特林数就是将n个球,划分为K个非空集 ...
- 【网络流】【Dinic】【最大流】bzoj3396 [Usaco2009 Jan]Total flow 水流
#include<cstdio> #include<cstring> #include<algorithm> #include<queue> using ...
- Problem E: 零起点学算法25——判断是否直角三角形
#include<stdio.h> int main() { int a,b,c; while(scanf("%d %d %d",&a,&b,& ...
- golang设计模式-成员变量赋值
常见golang的struct赋值有两种: 1)定义变量同时初始化 val := &Options{ UID:int(1), } 2)先定义变量,再赋值 val := new(Options) ...
- MJExtension使用指导(转)
MJExtension使用指导(转) MJExtension能做什么? MJExtension是一套字典和模型之间互相转换的超轻量级框架 MJExtension能完成的功能 字典(JSON) --& ...
- Java下String逗号数组和List<String>的互相转换
说明:很遗憾,组装的时候只能遍历. 方法: public static String listToString(List<String> list){ if(list==null){ re ...