摘要:才学不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,获取较为复杂,纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定
才学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/89917.html
摘要:才学不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,获取较为复杂,纯粹使用自己了解到的东西依赖是用写的提供的城市请选择请选择请选择确定 才学JS不久,刚好项目需要一个京东地址选择器,所以尝试着写了一个,dom获取较为复杂,纯粹使用自己了解到的东西 showImg(https://segmentfault.com/img/bVYXBr?w=748&h=1334); 依赖 //c...
阅读 3115·2021-11-04 16:09
阅读 3015·2021-09-23 11:49
阅读 3570·2021-09-09 09:33
阅读 3499·2021-08-18 10:22
阅读 2011·2019-08-30 15:55
阅读 3579·2019-08-30 15:53
阅读 2625·2019-08-28 18:08
阅读 857·2019-08-26 18:18