页面滑动,底部页码更新

moting 发布于 2024-11-21 72 次阅读


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)
	}
})