MUI仿京东App地址选择器

pinecone 发布于2019-08-29 13:52 / 1821人阅读

摘要：才学不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，获取较为复杂，纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定

才学JS不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，dom获取较为复杂，纯粹使用自己了解到的东西

依赖

//css是用rem写的


//mui提供的城市js

HTML

页面内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 ; i1){
                    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;
}

服务器托管 idc机房托管仿图片选择器 js做地址选择器仿京东 php仿京东商城

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112764.html

MUI仿京东App地址选择器

摘要：才学不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，获取较为复杂，纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定才学JS不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，dom获取较为复杂，纯粹使用自己了解到的东西 showImg(https://segmentfault.com/img/bVYXBr?w=748&h=1334); 依赖 //c...

陈伟 2019-08-21 17:43 评论0 收藏0
MUI仿京东App地址选择器

摘要：才学不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，获取较为复杂，纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定才学JS不久，刚好项目需要一个京东地址选择器，所以尝试着写了一个，dom获取较为复杂，纯粹使用自己了解到的东西 showImg(https://segmentfault.com/img/bVYXBr?w=748&h=1334); 依赖 //c...

RayKr 2019-08-05 12:24 评论0 收藏0
UI仿写 - 收藏集 - 掘金

摘要：启动页旅行云阅一个仿网易云音乐，使用及豆瓣开发的开源项目掘金一款基于网易云音乐，使用及豆瓣开发的符合阅读类的开源项目。 Android 仿今日头条的开源项目 - Android - 掘金起因看到众多大神纷纷有了自己的开源项目，于是自己琢磨着也想做一个开源项目来学习下，因为每次无聊必刷的app就是今日头条，评论简直比内容都精彩，所以我打算仿今日头条来练练手，期间也曾放弃过，也遇到很多坑...

AlienZHOU 2019-06-25 11:17 评论0 收藏0
UI仿写

摘要：像微信一样的图片选择器像微信一样的图片选择器像微信一样录制视频和音频重构史上最牛逼的音乐播放器仿网易云音乐已开源无论是下载模块，还是换肤模块，还是炫丽的界面通讯录顶部固定的索引效果通讯录和城市列表展示时通用的滑动顶部固定的索引列表效果 Android 仿京东、天猫 app 的商品详情页的布局架构, 以及功能实现仿京东、天猫 app 的商品详情页自定义 viewgroup+viewd...

frontoldman 2019-06-25 11:46 评论0 收藏0
仿购物阅读类app的分类界面

摘要：本文标题是仿购物阅读类的分类界面，因为大多数的分类界面都是这样，尤购物类阅读类居多。本文效果是仿京东阅读分类界面。之前无意安装了京东阅读，无意中看到了一个分类界面，感觉效果很好，就想写下来。本文标题是仿购物阅读类app的分类界面，因为大多数app的分类界面都是这样，尤购物类阅读类居多。本文效果是仿京东阅读分类界面。之前无意安装了京东阅读，无意中看到了一个分类界面，感觉效果很好，就想...

Lucky_Boy 2019-06-25 11:33 评论0 收藏0