国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

MUI仿京東App地址選擇器

pinecone / 1940人閱讀

摘要:才學(xué)不久,剛好項(xiàng)目需要一個(gè)京東地址選擇器,所以嘗試著寫了一個(gè),獲取較為復(fù)雜,純粹使用自己了解到的東西依賴是用寫的提供的城市請(qǐng)選擇請(qǐng)選擇請(qǐng)選擇確定

才學(xué)JS不久,剛好項(xiàng)目需要一個(gè)京東地址選擇器,所以嘗試著寫了一個(gè),dom獲取較為復(fù)雜,純粹使用自己了解到的東西

依賴

//css是用rem寫的


//mui提供的城市js

HTML

  • 請(qǐng)選擇
  • 請(qǐng)選擇
  • 請(qǐng)選擇
確定

頁面內(nèi)JS

mui.init();
mui(".mui-scroll-wrapper").scroll({
    scrollY: true, //是否豎向滾動(dòng)
    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);
}

調(diào)用函數(shù)

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 ; i1){
                    p = active[0].innerText + active[1].innerText + "多個(gè)區(qū)域";
                }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;
}

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/112764.html

相關(guān)文章

  • MUI仿京東App地址選擇

    摘要:才學(xué)不久,剛好項(xiàng)目需要一個(gè)京東地址選擇器,所以嘗試著寫了一個(gè),獲取較為復(fù)雜,純粹使用自己了解到的東西依賴是用寫的提供的城市請(qǐng)選擇請(qǐng)選擇請(qǐng)選擇確定 才學(xué)JS不久,剛好項(xiàng)目需要一個(gè)京東地址選擇器,所以嘗試著寫了一個(gè),dom獲取較為復(fù)雜,純粹使用自己了解到的東西 showImg(https://segmentfault.com/img/bVYXBr?w=748&h=1334); 依賴 //c...

    陳偉 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<