DOM结构:
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">隐私条例</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<div class="ysbox">
<div class="mui-slider">
<div class="mui-slider-group">
<!--第一个内容区容器-->
<div class="mui-slider-item">
<div class="yscont">
111111
</div>
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<div class="yscont">
22222
</div>
</div>
</div>
</div>
</div>
<div class="ymbox">
<p><span id="ymNum">1</span>/2</p>
</div>
</div>
</div>
CSS内容
.yscont {
height: 750px;
background-color: #dedede;
padding: 20px;
border-radius: 20px;
border: #007AFF 1px solid;
}
.ymbox {
text-align: center;
padding: 10px;
}
.ymbox p {
font-size: 100% !important;
}
JS部分
mui.init(); // 初始化
var allPageNum = 2 // 声明总共页数,可改为动态获取
// 绑定一个左滑动事件
mui('.mui-slider-group').on('swipeleft', '.mui-slider-item', function() {
// 获取当前页码
let currPageNum = $("#ymNum").text()
// 判断如果左滑动的时候当前页码小于总页码(逻辑是当前页码小于总页码,那么只要左滑动了当前页码就加1)
if (currPageNum < allPageNum) {
// 当前页码自增加1
currPageNum++
// 写入DOOM新的当前页码
$("#ymNum").text(currPageNum)
}
})
mui('.mui-slider-group').on('swiperight', '.mui-slider-item', function() {
let currPageNum = $("#ymNum").text()
// 如果右滑动当前页码大于一(也就是说如果不在第一页)就减1
if (currPageNum > 1) {
currPageNum--
$("#ymNum").text(currPageNum)
}
})
Comments NOTHING