MUI仿京东App地址选择器

时间：2023-03-31 13:13:15 CSS

刚学js没多久，项目刚好需要一个京东地址选择器，于是尝试写一个，dom获取比较复杂，纯粹用我知道的依赖//css写在rem//mui提供的城市jsHTML

请选择

请选择请选择

AddressJSmui.init();mui('.mui-scroll-wrapper').scroll({scrollY:true,//是否垂直滚动bounce:true//是否启用反弹});变量p='';//文本varnum='';//valuevaluevaraddress=document.getElementById('address')address.addEventListener('tap',function(){mui('#addSelect').popover('show');addS();})functiongiveValue(){地址.innerHTML=p;mui('#addSelect').popover('隐藏');控制台日志（p）；console.log(num);}调用函数functionaddS(){varslider=mui('#slider').滑块（）；varselectNav=document.getElementById('selectNav');varselectNavLi=selectNav.getElementsByTagName('li');varoneUl=document.getElementById('select-con-1');vartwoUl=document.getElementById('select-con-2');varthreeUl=document.getElementById('select-con-3');varitem1=document.getElementById('item1');varitem2=document.getElementById('item2');varitem3=document.getElementById('item3');变种指数1，指数2，指数3;for(i=0;i1){p=active[0].innerText+active[1].innerText+'多个区域';}else{p+=文本；}}}//赋值giveValue();})}cssul,li{保证金:0;填充：0；列表样式：无；}.mui-popover{高度：5rem；背景颜色：#fff！重要；}.mui-slider-group{高度：4.42rem！重要；}.mui-slider-item{边框：无！重要；}.select-head{位置：相对；显示：弹性；证明内容：空格之间；填充：00.26rem；宽度：100%；高度：0.58rem;}.select-head:after{内容：'';位置：绝对；底部：0；左：0；宽度：100%；高度：1px；背景色：#e5e5e5；变换：scaleY(.5);}.select-headul{flex:1;}.select-headulli{position:relative;向左飘浮;右边距：0.24rem；字体大小：0.186rem；颜色：#333；行高：0.58rem；颜色：#CE3D3A;}.select-headulli.active{颜色：#333;}.select-headulli.active:after{height:0;}.select-headulli:after{content:'';位置：绝对；底部：0；左：0；宽度：100%；高度：2px；背景颜色：#CE3D3A;}.select-heada{float:right;边框：无；字体大小：0.186rem；line-height:0.58rem;}.select-con{position:relative;}.select-con.mui-scroll-wrapper{margin:0;高度：4.42rem;}.select-con.mui-scroll-wrapperul{填充：0.1rem0;}.select-con.mui-scroll-wrapperli{填充：00.26rem;行高：0.58rem；字体大小：0.186rem；颜色：#333;}.select-con.mui-scroll-wrapperli.active{颜色：#CE3D3A;}

上一篇：一个基于canvas的高性能、跨平台的股票图表库--clchart

下一篇：vue+element动态表头怎么写（一）

MUI仿京东App地址选择器相关文章