Better-scroll做索引

最新推荐文章于 2021-05-12 21:50:44 发布
导乐符
最新推荐文章于 2021-05-12 21:50:44 发布
阅读量551
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/qq_36800701/article/details/81557876
版权
js 专栏收录该内容
33 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>better-scroll</title>
<script src="js/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	html,
	body{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.list-wrapper{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.index-nav-list{
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		display: flex;
		display: -webkit-flex;
	}
	.index-nav-list ul{
		margin: auto;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}
	.index-nav-list li{
		width: 50px;
		text-align: center;
		font-size: 14px;
		color: #555;
		padding: 5px 0;
	}
	.index-nav-list li.active{
		color: red;
	}
	
	.index-list-content{
		background: #fff;
		border-radius: 2px;
	}
	
	.index-list-title{
		padding: 14px 16px;
		font-size: 14px;
		line-height: 1.6;
		color: #333;	
	}
	
	.index-list-anchor{
		padding: 16px 16px 10px 16px;
		line-height: 1;
		font-size: 14px;
		color: #999;
		background: #f7f7f7;	
	}
	
	.index-list-item {
		position: relative;
		height: 50px;
		line-height: 50px;
		padding: 0 16px;
		font-size: 14px;
		color: #333;
	}
	.index-list-item:last-child{
		border: none;
	}
	.index-list-item_active{
		background: #ddd;	
	}
	.index-list-fixed{
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		padding: 16px 16px 10px 16px;
		box-sizing: border-box;
		font-size: 14px;
		line-height: 1;
		color: #999;
		background: #f7f7f7;	
	}

	.mark{
		position: fixed;
		left: 50%;
		top: 50%;
		width: 100px;
		height: 100px;
		margin: -50px 0 0 -50px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50px;
		font: 50px/100px "微软雅黑";
		text-align: center;
		color: #fff;
		opacity: 0;
		transition: opacity 0.2s;
		-webkit-transition: opacity 0.2s;
	}
	
</style>
</head>

<body>
<div class="list-wrapper">
  <div class="scroll-content">
      <div class="index-list-content">
          <div class="index-list-title">
              定位城市: 北京
          </div>
          <ul>
              <li>
                  <h2 class="index-list-anchor">
                      ★热门城市
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          北京市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          上海市
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      A
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          鞍山市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          安庆市
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      B
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
            
                          北京市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          巴音郭楞州
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          博尔塔拉州
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      C
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          成都市
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      E
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          鄂尔多斯市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          鄂州市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          恩施州
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      F
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          福州市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          佛山市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          防城港市
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      G
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          广州市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          贵阳市
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      H
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          杭州市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          和田地区
                      </li>
                  </ul>
              </li>
              <li>
                  <h2 class="index-list-anchor">
                      Z
                  </h2>
                  <ul>
                      <li class="index-list-item border-bottom-1px">
                          郑州市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          张家口市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          张家界市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          珠海市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          中山市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          自贡市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          资阳市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          枣庄市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          舟山
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          遵义市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          淄博市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          株洲市
                      </li>
                      <li class="index-list-item border-bottom-1px">
                          中卫市
                      </li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</div>
<div class="index-nav-list">
	<ul>
		<li class="active">★</li>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>E</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
		<li>Z</li>
	</ul>
</div>
<div class="mark">A</div>
<script type="text/javascript">
	
void (function(){
	
	var listWrapper = document.querySelector(".list-wrapper");
	var listWrapperItems = listWrapper.querySelectorAll(".scroll-content>.index-list-content>ul>li")
	var indexNavList = document.querySelector(".index-nav-list");
	var indexNavListUl = indexNavList.querySelector("ul");
	var indexNavListItems = indexNavListUl.children;
	var indexNavListUlTop = indexNavListUl.offsetTop;
	var indexNavListItemHeight = indexNavListUl.children[0].offsetHeight;
	var indexListContentItems = document.querySelectorAll(".index-list-content>ul>li");
	var mark = document.querySelector(".mark");
	console.log(indexListContentItems);
	var bScroll = new BScroll(listWrapper, {
		probeType: 3,
		bounce: false
	});
	
	var len = listWrapperItems.length;
	
	bScroll.on("scroll", function(e){
		var y = -e.y;
		if (y < listWrapperItems[0].offsetTop) {
			setNav (0);
			return;
		}
		for (var i=0; i<len-1; i++) {
			if (y >= listWrapperItems[i].offsetTop && y < listWrapperItems[i+1].offsetTop) {
				setNav (i);
				return;
			}
		}
		setNav (len-1);
	});
	
	indexNavListUl.addEventListener("touchstart", function(e){
		var touch = e.changedTouches[0];
		setIndex (touch.clientY)
	});
	
	indexNavListUl.addEventListener("touchmove", function(e){
		var touch = e.changedTouches[0];
		setIndex (touch.clientY)
	});
	
	indexNavListUl.addEventListener("touchend", function(){
		mark.style.opacity = "0";
	});
	
	//设置
	function setIndex (y) {
		var index = getIndex (y);
		if (index >=0 && index < len) {
			bScroll.scrollToElement(indexListContentItems[index],100);
			setNav (index);
			tabMark (index);
		}
	}
	
	//获取索引
	function getIndex (y) {
		return parseInt((y - indexNavListUlTop) / indexNavListItemHeight);
	}
	
	function tabMark (index) {
		mark.style.opacity = "1";
		mark.innerHTML = indexNavListItems[index].innerHTML;
	}
	
	function setNav (index) {
		for (var i=0; i<indexNavListItems.length; i++) {
			indexNavListItems[i].classList.remove("active");
		}
		indexNavListItems[index].classList.add("active");
	}
	
})();
	
	
</script>
</body>
</html>