MUI仿京東App地址選擇器

才學JS不久，恰好項目須要一個京東地址選擇器，因此嘗試着寫了一個，dom獲取較爲複雜，純粹使用本身瞭解到的東西

依賴

//css是用rem寫的
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
//mui提供的城市js
<script src="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 = 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;
}