当前位置:Gxlcms > JavaScript > 使用jQueryMobile实现滑动翻页效果的方法_jquery

使用jQueryMobile实现滑动翻页效果的方法_jquery

时间:2021-07-01 10:21:17 帮助过:50人阅读

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下:

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见

虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇【jQuery手机浏览器中拖拽动作的艰难性分析】中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突。

那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢?

一、基本目标

在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的功能,如下图:

并且记录当前页的页数,随用户滑动而自动增加与减少。

二、制作过程

关于JqueryMobile的界面怎么布置,不再细说,详情请翻阅之前一篇【jQueryMobile之Helloworld与页面切换的方法】

如下的代码注释,主要是叙述如何通过对JqueryMobile封装好的滑动手势jQuery Mobile Swipeleft与jQuery Mobile Swiperight处理,来实现上面的页面,W3C《jQuery Mobile Touch 事件》一文中对此的叙述是有问题的,实验代码与给出的代码并不一致:

代码如下:




a