MUI仿京东App地址选择器

五陵年少金市东，银鞍白马渡春风。这篇文章主要讲述MUI仿京东App地址选择器相关的知识，希望能为你提供帮助。
才学JS不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，dom获取较为复杂，纯粹使用自己了解到的东西

文章图片

依赖

//css是用rem写的 < script src="https://www.songbingjia.com/android/js/app.js" type="text/javascript" charset="utf-8"> < /script> < script src="https://www.songbingjia.com/android/js/mui.min.js" type="text/javascript" charset="utf-8"> < /script> //mui提供的城市js < script src="https://www.songbingjia.com/android/js/city.data-3.js" type="text/javascript" charset="utf-8"> < /script>

html

< div id="addSelect" class="mui-popover mui-popover-bottom mui-popover-action"> < div id="slider" class="mui-slider"> < div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> < div class="select-head"> < ul class="select-nav mui-clearfix" id="selectNav"> < li> 请选择< /li> < li class="mui-hidden"> 请选择< /li> < li class="mui-hidden"> 请选择< /li> < /ul> < a id="addressBtn"> 确定< /a> < /div> < /div> < div class="mui-slider-group select-con" id="selectCon"> < div id="item1" class="mui-slider-item mui-control-content mui-active"> < div id="scroll1" class="mui-scroll-wrapper"> < div class="mui-scroll"> < ul id="select-con-1"> < /ul> < /div> < /div> < /div> < div id="item2" class="mui-slider-item mui-control-content"> < div id="scroll2" class="mui-scroll-wrapper"> < div class="mui-scroll"> < ul id="select-con-2"> < /ul> < /div> < /div> < /div> < div id="item3" class="mui-slider-item mui-control-content"> < div id="scroll3" class="mui-scroll-wrapper"> < div class="mui-scroll"> < ul id="select-con-3"> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < div class="mui-content"> < div class="box" style="margin: 30px 20px; "> < a id="address"> 地址< /a> < /div> < /div>

页面内JS

mui.init(); mui(‘.mui-scroll-wrapper‘).scroll({ scrollY: true, //是否竖向滚动 bounce: true //是否启用回弹 }); var p = ‘‘; //文字 var num = ‘‘; //value值var address = document.getElementById(‘address‘) address.addEventListener(‘tap‘,function(){ mui(‘#addSelect‘).popover(‘show‘); addS(); }) function giveValue(){ address.innerHTML = p; mui(‘#addSelect‘).popover(‘hide‘); console.log(p); console.log(num); }

调用函数

function addS(){var slider = mui(‘#slider‘).slider(); var selectNav = document.getElementById(‘selectNav‘); var selectNavLi = selectNav.getElementsByTagName(‘li‘); var oneUl = document.getElementById(‘select-con-1‘); var twoUl = document.getElementById(‘select-con-2‘); var threeUl = document.getElementById(‘select-con-3‘); var item1 = document.getElementById(‘item1‘); var item2 = document.getElementById(‘item2‘); var item3 = document.getElementById(‘item3‘); var index1 , index2 , index3; for( i=0 ; i< cityData3.length ; i++){ var li = document.createElement("li"); li.setAttribute(‘value‘,cityData3[i].value); li.innerHTML = cityData3[i].text; oneUl.appendChild(li) }var OneLi = oneUl.getElementsByTagName(‘li‘); for( i=0 ; i< OneLi.length ; i++){ var a = OneLi[i]; a.index = i; a.addEventListener(‘tap‘,function(){ //清空第二个ul twoUl.innerHTML = ‘‘; selectNavLi[1].innerText = ‘请选择‘; selectNavLi[2].classList.add(‘mui-hidden‘); //获取下标和切换显示 index1 = this.index; for(var i = 0; i < OneLi.length ; i++){ OneLi[i].classList.remove(‘active‘); } this.classList.add(‘active‘); selectNavLi[0].innerText = this.innerText; selectNavLi[0].classList.add(‘active‘); selectNavLi[1].classList.remove(‘mui-hidden‘); //创建li并向第二个ul赋值 var children = cityData3[index1].children; for( i=0 ; i< children.length ; i++){ var li = document.createElement("li"); li.setAttribute(‘value‘,children[i].value); li.innerHTML = children[i].text; twoUl.appendChild(li); } //显示第二个 item2.classList.remove(‘mui-hidden‘); selectNavLi[1].classList.remove(‘active‘); slider.gotoItem(1,300); slider.stopped = false; //开启滑动切换var twoLi = twoUl.getElementsByTagName(‘li‘); for( i=0 ; i< twoLi.length ; i++){ var a = twoLi[i]; a.index = i; a.addEventListener(‘tap‘,function(){ //清空第二个ul threeUl.innerHTML = ‘‘; //获取下标和切换显示 index2 = this.index; for(var i = 0; i < twoLi.length ; i++){ twoLi[i].classList.remove(‘active‘); } this.classList.add(‘active‘); selectNavLi[1].innerText = this.innerText; selectNavLi[1].classList.add(‘active‘); selectNavLi[2].classList.remove(‘mui-hidden‘); //创建li并向第二个ul赋值 var children = cityData3[index1].children[index2].children; for( i=0 ; i< children.length ; i++){ var li = document.createElement("li"); li.setAttribute(‘value‘,children[i].value); li.innerHTML = children[i].text; threeUl.appendChild(li); } //显示第三个 item3.classList.remove(‘mui-hidden‘); slider.gotoItem(2,300); var threeLi = threeUl.getElementsByTagName(‘li‘); for( i=0 ; i< threeLi.length ; i++){ var a = threeLi[i]; a.index = i; a.addEventListener(‘tap‘,function(){ for(var i = 0; i < threeLi.length ; i++){ threeLi[i].classList.remove(‘active‘); } this.classList.add(‘active‘); }) } }) } }) }//导航点击事件 selectNavLi[0].addEventListener(‘tap‘,function(){ slider.gotoItem(0,300); }) selectNavLi[1].addEventListener(‘tap‘,function(){ slider.gotoItem(1,300); }) selectNavLi[2].addEventListener(‘tap‘,function(){ slider.gotoItem(2,300); })//提交 document.getElementById(‘addressBtn‘).addEventListener(‘tap‘,function(){ p = ‘‘; num = ‘‘; var active = document.getElementsByClassName(‘select-con‘)[0].getElementsByClassName(‘active‘); if(active.length == 0){ return; }else{ var threeLi = threeUl.getElementsByClassName(‘active‘).length; for(i=0 ; i< active.length ; i++){ var value = https://www.songbingjia.com/android/active[i].getAttribute(‘value‘); var text = active[i].innerText; if(i==0){ num += value; }else{ num += ‘,‘+value; } if(threeLi> 1){ p = active[0].innerText + active[1].innerText + ‘多个区域‘; }else{ p += text; } } }//赋值 giveValue(); }) }

css

ul,li{ margin: 0; padding: 0; list-style: none; }.mui-popover{ height: 5rem; background-color: #fff !important; } .mui-slider-group{ height: 4.42rem !important; } .mui-slider-item{ border: none !important; } .select-head{ position: relative; display: flex; justify-content: space-between; padding: 0 0.26rem; width: 100%; height: 0.58rem; } .select-head:after{ content: ‘‘; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e5e5e5; transform: scaleY(.5); } .select-head ul{ flex: 1; } .select-head ul li{ position: relative; float: left; margin-right: 0.24rem; font-size: 0.186rem; color: #333; line-height: 0.58rem; color: #CE3D3A; } .select-head ul li.active{ color: #333; } .select-head ul li.active:after{ height: 0; } .select-head ul li:after{ content: ‘‘; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #CE3D3A; } .select-head a{ float: right; border: none; font-size: 0.186rem; line-height: 0.58rem; } .select-con{ position: relative; } .select-con .mui-scroll-wrapper{ margin: 0; height: 4.42rem; } .select-con .mui-scroll-wrapper ul{ padding: 0.1rem 0; } .select-con .mui-scroll-wrapper li{ padding: 0 0.26rem; line-height: 0.58rem; font-size: 0.186rem; color: #333; } .select-con .mui-scroll-wrapper li.active{ color: #CE3D3A; }

【MUI仿京东App地址选择器】本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h1bhi2i1kab