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 的坑的更多相关文章

  1. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  2. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  3. Vue.js 使用 Swiper.js 在 iOS 11 时出现错误

    前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...

  4. Vue发布过程中遇到坑,以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  5. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  6. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  7. Javascript - Vue - vue对象

    vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...

  8. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  9. 前端开发 Vue Vue.js和Nodejs的关系

    首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...

  10. [Vue] : Vue概述

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ...

随机推荐

  1. POJ 2488 A Knight's Journey (回溯法 | DFS)

    题目链接:http://poj.org/problem?id=2488 题意: 在国际象棋的题盘上有一个骑士,骑士只能走“日”,即站在某一个位置,它可以往周围八个满足条件的格子上跳跃,现在给你一个p ...

  2. tarjan算法与无向图的连通性(割点,桥,双连通分量,缩点)

    基本概念 给定无向连通图G = (V, E)割点:对于x∈V,从图中删去节点x以及所有与x关联的边之后,G分裂为两个或两个以上不相连的子图,则称x为割点割边(桥)若对于e∈E,从图中删去边e之后,G分 ...

  3. [Atcoder Regular Contest 060] Tutorial

    Link: ARC060 传送门 C: 由于难以维护和更新平均数的值: $Average->Sum/Num$ 这样我们只要用$dp[i][j][sum]$维护前$i$个数中取$j$个,且和为$s ...

  4. POJ 1236 Network of Schools(SCC)

    [题目链接] http://poj.org/problem?id=1236 [题目大意] 给出一张有向图,问需要从几个起点出发才能遍历全图, 如果要求从任何一个点出发都能遍历全图,那么最少需要增加几条 ...

  5. [NEERC2007][SHOI2008]Cactus Reloaded

    题目大意: 给你一个仙人掌,求图中相距最远的点对之间的距离. 思路: Tarjan+DP. 我们先考虑一个树的情况. 设用far[u]表示点u出发到其子树中叶子节点的最大距离,若v为u的子结点,很显然 ...

  6. Eclipse / Pycharm | 使用过程中的一些问题笔记

    最近有比较多的用到这两款工具,其中也遇到一些问题,知道了一些快捷键 快捷键什么的这里就不讲了,去网上搜搜,经常使用下,自然就熟悉了 主要记录一下我遇到的几个问题 文章目录 Pycharm出现的部分快捷 ...

  7. winform TreeView树节点上下移动

    /// <summary> /// 上移 /// </summary> /// <param name="sender"></param& ...

  8. MySQL Workbench 工具

    http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html http://www.cnblogs.com/daimage/archive ...

  9. MythXinWCF通用宿主绿色版V1.1

    更新内容:宿主的唯一编号和名称可以输入符号"."日志文本框增加滚动条,并且总是显示文本末端增加启动方式选择:1.手动启动 2.跟随系统启动 最新下载地址: http://pan.b ...

  10. C++之string学习

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <list> #include <string& ...