JQuery Mobile左右滑动效果
程序员文章站
2022-04-02 15:41:26
...
首先，页面里有两个<div data-role="page">，捡重点的写是，省掉其中的header和footer,这样：
01 |
//第一页面 |
02 |
<div data-role="page" id="index">
|
03 |
<div data-role="content">
|
04 |
<ul data-role="listview" id="circle-news-list">
|
05 |
<!-- 第一个列表 -->
|
06 |
</ul>
|
07 |
</div>
|
08 |
</div>
|
09 |
//第二页面 |
10 |
<div data-role="page" id="class-page">
|
11 |
<div data-role="content">
|
12 |
<ul data-role="listview" id="class-news-list">
|
13 |
<!-- 第二个列表 -->
|
14 |
</ul>
|
15 |
</div>
|
16 |
</div>
|
接下来通过jquery mobile 中的swipe事件还执行左右滑动效果：
01 |
<script> |
02 |
$(function(){
|
03 |
$("#circle-news-list").bind("swipeleft",function(){
|
04 |
$.mobile.changePage("#class-page");
|
05 |
});
|
06 |
$("#class-news-list").bind("swiperight",function(){
|
07 |
$.mobile.changePage("#index", {transition:"slide",reverse:true}, true, true);
|
08 |
});
|
09 |
}); |
10 |
</script> |
这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上
reverse:true,这样就可以实现左右切换了~
来自：http://designicu.com/jquery-mobile-swipe/
上一篇： ajax遇到的一点问题
下一篇： JQuery跨域访问解决方案