Jquery Mobile左右滑动效果

最新推荐文章于 2021-06-19 17:18:41 发布

AndroidDev2022

最新推荐文章于 2021-06-19 17:18:41 发布

阅读量8.4k

点赞数 2

文章标签： jquery mobile

本文链接：https://blog.csdn.net/jdfkldjlkjdl/article/details/12446509

版权

JQuery Mobile 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点，就没有写出footer和header。定义的页面如下：

<body>	
<!-- 第一个页面 -->
	<div data-role="page" id="index">

		<div data-role="content">
			<ul data-role="listview" id="listview1">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>

	</div>
	<!-- 第二个页面 -->
	<div data-role="page" id="class-page">

		<div data-role="content">
			<ul data-role="listview" id="listview2">
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>

	</div>
</body>

接下来通过jquery mobile 中的swipe事件执行左右滑动效果：

<script>
	$(function() {

		$("#listview1").bind("swipeleft", function() {

			$.mobile.changePage("#class-page");

		});

		$("#listview2").bind("swiperight", function() {

			$.mobile.changePage("#index", {
				transition : "slide",
				reverse : true
			}, true, true);

		});

	});
</script>

这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上

reverse:true,这样就可以实现左右切换了~

参考文章：http://my.oschina.net/geomen/blog/75387