v-touch使用方法以及在项目中遇到的问题
上篇博客中我记得还有一个坑没有解决好,在这篇博客中详细说明一下。
在 https://github.com/dreamITGirl/vuepageturn 我的这个代码库里,更新到2.1版本。
目前解决了:在v-touch中,有滚动区域的话,滚动区域不好用,尤其是在ios系统中,无法滑动的问题;新增图片预加载功能;滑动到某一页时,该页才会出现动画效果,
我先依次说一下我的解决方式
首先,第一个问题:在v-touch中,有滚动区域的话,滚动区域不好用,尤其是在ios系统中,无法滑动的问题
在解决这个的时候,我和团队的leader我们确实翻过不少资料,发现滚动不了其实主要原因就是在滚动区域滚动条触顶或者触底了。如图(以触顶为例)

当滚动条所处的位置和蓝色位置一样时,在移动端就会出现滑动区域卡死的状态,这时的滚动条就是触顶了。(触底类似,不再赘述)
所以,我们解决的方式就是在监听到用户的滚动条位置触顶或者触底时,控制滚动条往下或者往上移动一段距离,这样滑动区域就不会卡死,但是,用户体验不是很好,而且,可能会存在用户无法滑动到底部。不过如果你们有更好的解决方式,可以分享出来。
第二个问题:新增图片预加载功能
我是在component中创建了一个新的组件专门load图片和其他资源。
以图片为例:
创建了一个图片的数组,将每张图片的路径放在这个数组中。然后遍历数组,创建image对象,使image的src属性对应数组中的路径,当遍历结束时,通过路由跳转的方式跳到首页面
如果用户需要加上加载的百分比,可以在data中设置percent的属性,在遍历时给通过计算的方式赋值就可以了。
第三个问题:滑动到某一页时,该页才会出现动画效果
我的动画效果是直接引用的animate.css;官网地址:https://daneden.github.io/animate.css/ 大家如果不想自己写,或者是动画不复杂,可以直接引用。
当我上下翻页的时候,动画已经执行完了。所以,需要判断一下当前的页面是哪一个,然后再给它加上动画的class
我是在vuex中管理我的组件显示的状态的。在页面滑动结束时,提交状态,然后相应的组件在computed中进行监听,如果满足条件,则返回true,则显示动画的class值。
v-touch使用方法以及在项目中遇到的问题的更多相关文章
- ASP.NET MVC jQuery 树插件在项目中使用方法(一)
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- SpringBoot系列: SpringBoot Web项目中使用Shiro 之二
==================================Shiro 的加深理解:==================================1. Shiro 和 Spring 系组 ...
- ASP.NET MVC项目中App_Code目录在程序应用
学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...
- Jwt在javaweb项目中的应用核心步骤解读
1.引入jwt依赖 <!--引入JWT依赖,由于是基于Java,所以需要的是java-jwt--> <dependency> <groupId>io.jsonweb ...
- [Swift通天遁地]八、媒体与动画-(10)在项目中播放GIF动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- vue项目中net::ERR_CONNECTION_TIMED_OUT错误
我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...
- 在Springboot + Mybaitis-plus 项目中利用Jackson实现json对java多态的(反)序列化
Jackson允许配置多态类型处理,当JSON面对的转换对象是一个接口.抽象类或者一个基类的时候,可以通过一定配置实现JSON的转换.在实际项目中,Controller层接收入参以及在Dao层将对象以 ...
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
- 读取另一个项目中方法的json
A项目中的被调用方法: public class Eg1Action { public void save(){ write("{\"state\":1,\ ...
随机推荐
- Oracle logminer 分析redo log(TOAD与PLSQL)
Oracle logminer 分析redo log Oracle 11g r2 RAC centos 6.5 设置时间格式 select to_char(sysdate,'yyyy-mm-dd hh ...
- c语言-树的基础知识
第一.树的定义: 1.有且只有一个称为根的节点 2.有若干个互不相交的子树,这些子树本身也是一颗树 第二.专业术语: 树的深度:从根节点到最低层,节点的层数 ,称之为树的深度. 根节点是第一 ...
- eclipse下搭建Drools规则引擎环境
插件下载地址:http://download.jboss.org/drools/release/ 1.点开对应的版本文件,选择标红的两个压缩包下载,其他的如有需要也可以自行选择: 2.将下载的压缩包解 ...
- jackson2.x与Jackson1.9的比较
Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象.Jackson库于2012.10.8号发布了最新的2.1版.Jackson源码目前 ...
- 部署和调优 1.8 samba 部署和优化-2
Samba 可以实现 Linux 和 Windows 机器相互共享文件,这对我们来说是非常实用的.下面做几个实践,来了解samba,注意:在实践之前,请先检测 Selinux 是否关闭,否则可能会实践 ...
- java代码连接数据库
/** * * @author lidelin 2017-03-03 * 连接数据库简单实例 * 准备工作:建项目工程,例如:test-jdbc;导入odbc6.jar */ public class ...
- dubbo错误排查之No provider available for the service
今天搞的一个dubbo服务,暴漏出来了,但是consumer端启动就报这个错,排查过程记录一下 一.启动zkCli 利用命令查看 ls / ls /dubbo 继续查看 ls /dubbo/com.w ...
- __call()和__callStatic()方法
__call() 当对象访问不存在的方法时,__call()方法会被自动调用__callStatic() 当对象访问不存在的静态方法时,__callStatic()方法会被自动调用 这两个方法在PHP ...
- C++指针作为函数的参数进行传递时注意的问题
应注意问题: 当指针作为函数的参数进行传递的时候,本质上还是进行的"值传递",也就是复制了一个新的指向该地址的指针变量. 只有在被调函数中,对指针进行引用操作,才可以达到不需要返回 ...
- java 使用simpleDateFormat格式化日期 时间.RP
首先了解一下格式化日志的所有表示. 时间日期标识符: yyyy:年 MM:月 dd:日 hh:1~12小时制(1-12) HH:24小时制(0-23) mm:分 ss:秒 S:毫秒 E:星期几 D:一 ...