上篇博客中我记得还有一个坑没有解决好,在这篇博客中详细说明一下。

    在 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使用方法以及在项目中遇到的问题的更多相关文章

  1. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  2. SpringBoot系列: SpringBoot Web项目中使用Shiro 之二

    ==================================Shiro 的加深理解:==================================1. Shiro 和 Spring 系组 ...

  3. ASP.NET MVC项目中App_Code目录在程序应用

    学习ASP.NET MVC,如果你是开发ASP.NET MVC项目的,也许你去为项目添加前ASP.NET项目的APP_Code目录,在这里创建与添加的Class类,也许你无法在MVC项目所引用. 那这 ...

  4. Jwt在javaweb项目中的应用核心步骤解读

    1.引入jwt依赖 <!--引入JWT依赖,由于是基于Java,所以需要的是java-jwt--> <dependency> <groupId>io.jsonweb ...

  5. [Swift通天遁地]八、媒体与动画-(10)在项目中播放GIF动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. vue项目中net::ERR_CONNECTION_TIMED_OUT错误

    我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上 ...

  7. 在Springboot + Mybaitis-plus 项目中利用Jackson实现json对java多态的(反)序列化

    Jackson允许配置多态类型处理,当JSON面对的转换对象是一个接口.抽象类或者一个基类的时候,可以通过一定配置实现JSON的转换.在实际项目中,Controller层接收入参以及在Dao层将对象以 ...

  8. 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  9. 读取另一个项目中方法的json

    A项目中的被调用方法: public class Eg1Action { public void save(){        write("{\"state\":1,\ ...

随机推荐

  1. CodeForces - 510B Fox And Two Dots (bfs或dfs)

    B. Fox And Two Dots time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. Modules:template

    ylbtech-Modules: 1.返回顶部 1.   2. 2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返 ...

  3. 线程安全(1)--demo1

    成员变量的类用于多线程时是不安全的,不安全体现在这个成员变量可能发生非原子性的操作,而变量定义在方法内也就是局部变量是线程安全的.想想在使用struts1时,不推荐创建成员变量,因为action是单例 ...

  4. 2016.8.11 DataTable合并及排除重复方法

    合并: DataTable pros=xxx; DataTable pstar=yyy; //将两张DataTable合成一张 foreach (DataRow dr in pstar.Rows) { ...

  5. MySQL学习笔记之一---字符编码和字符集

    前言: 一般来说,出现中文乱码,都是客户端和服务端字符集不匹配导致的原因. (默认未指定字符集创建的数据库表,都是latinl字符集, 强烈建议使用utf8字符集)   保证不出现乱码的思想:保证客户 ...

  6. Shell编程进阶 2.2 shell数组

    给一个字符指定一个数组 怎么显示数组 a= echo $a a=( ) echo $a echo ${a[@]} echo ${a[*]} 指定显示数组中第几个数字 echo ${a[]} echo ...

  7. LAMP 2.8 php.ini配置文件详解

    修改php配置文件,但有时候我们并不知道 php.ini 所在路径,这时候就需要通过命令来查一查在哪里. /usr/local/php/bin/php -i |head 看那一行 Loaded Con ...

  8. 探究QA职能

    测试人员一般是被外界普遍认为是QC,即对产品的质量进行检测,找出质量问题并配合相关人员解决问题,从而管控产品质量,说通俗点就是帮开发找漏洞,给开发擦屁股:如果线上出现bug,就是你没有测试完整,最累的 ...

  9. MySQL存储引擎 -- MyISAM(表锁定) 与 InnoDB(行锁定) 锁定机制

    前言 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就成为了各种数据库的核心技术之一.本章将对MySQL中两种 ...

  10. solr-用mmseg4j配置同义词索引和检索(IKanlyzer需要修改源码适应solr接口才能使用同义词功能)

    概念说明:同义词大体的意思是指,当用户输入一个词时,solr会把相关有相同意思的近义词的或同义词的term的语段内容从索引中取出,展示给用户,提高交互的友好性(当然这些同义词的定义是要在配置文件中事先 ...