摘要:才学不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,获取较为复杂,纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定
才学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;
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112764.html
摘要:才学不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,获取较为复杂,纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定 才学JS不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,dom获取较为复杂,纯粹使用自己了解到的东西 showImg(https://segmentfault.com/img/bVYXBr?w=748&h=1334); 依赖 //c...
阅读 2111·2021-11-08 13:14
阅读 3017·2021-10-18 13:34
阅读 2113·2021-09-23 11:21
阅读 3682·2019-08-30 15:54
阅读 1903·2019-08-30 15:54
阅读 3005·2019-08-29 15:33
阅读 2679·2019-08-29 14:01
阅读 2033·2019-08-29 13:52
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要