资讯专栏INFORMATION COLUMN

MUI仿京东App地址选择器

pinecone / 2032人阅读

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

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

依赖

</>复制代码

  1. //css是用rem写的
  2. //mui提供的城市js

HTML

</>复制代码

    • 请选择
    • 请选择
    • 请选择
  1. 确定
  2. 地址

页面内JS

</>复制代码

  1. mui.init();
  2. mui(".mui-scroll-wrapper").scroll({
  3. scrollY: true, //是否竖向滚动
  4. bounce: true //是否启用回弹
  5. });
  6. var p = ""; //文字
  7. var num = ""; //value值
  8. var address = document.getElementById("address")
  9. address.addEventListener("tap",function(){
  10. mui("#addSelect").popover("show");
  11. addS();
  12. })
  13. function giveValue(){
  14. address.innerHTML = p;
  15. mui("#addSelect").popover("hide");
  16. console.log(p);
  17. console.log(num);
  18. }

调用函数

</>复制代码

  1. function addS(){
  2. var slider = mui("#slider").slider();
  3. var selectNav = document.getElementById("selectNav");
  4. var selectNavLi = selectNav.getElementsByTagName("li");
  5. var oneUl = document.getElementById("select-con-1");
  6. var twoUl = document.getElementById("select-con-2");
  7. var threeUl = document.getElementById("select-con-3");
  8. var item1 = document.getElementById("item1");
  9. var item2 = document.getElementById("item2");
  10. var item3 = document.getElementById("item3");
  11. var index1 , index2 , index3;
  12. for( i=0 ; i1){
  13. p = active[0].innerText + active[1].innerText + "多个区域";
  14. }else{
  15. p += text;
  16. }
  17. }
  18. }
  19. // 赋值
  20. giveValue();
  21. })
  22. }

css

</>复制代码

  1. ul,li{
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. }
  6. .mui-popover{
  7. height: 5rem;
  8. background-color: #fff !important;
  9. }
  10. .mui-slider-group{
  11. height: 4.42rem !important;
  12. }
  13. .mui-slider-item{
  14. border: none !important;
  15. }
  16. .select-head{
  17. position: relative;
  18. display: flex;
  19. justify-content: space-between;
  20. padding: 0 0.26rem;
  21. width: 100%;
  22. height: 0.58rem;
  23. }
  24. .select-head:after{
  25. content: "";
  26. position: absolute;
  27. bottom: 0;
  28. left: 0;
  29. width: 100%;
  30. height: 1px;
  31. background-color: #e5e5e5;
  32. transform: scaleY(.5);
  33. }
  34. .select-head ul{
  35. flex: 1;
  36. }
  37. .select-head ul li{
  38. position: relative;
  39. float: left;
  40. margin-right: 0.24rem;
  41. font-size: 0.186rem;
  42. color: #333;
  43. line-height: 0.58rem;
  44. color: #CE3D3A;
  45. }
  46. .select-head ul li.active{
  47. color: #333;
  48. }
  49. .select-head ul li.active:after{
  50. height: 0;
  51. }
  52. .select-head ul li:after{
  53. content: "";
  54. position: absolute;
  55. bottom: 0;
  56. left: 0;
  57. width: 100%;
  58. height: 2px;
  59. background-color: #CE3D3A;
  60. }
  61. .select-head a{
  62. float: right;
  63. border: none;
  64. font-size: 0.186rem;
  65. line-height: 0.58rem;
  66. }
  67. .select-con{
  68. position: relative;
  69. }
  70. .select-con .mui-scroll-wrapper{
  71. margin: 0;
  72. height: 4.42rem;
  73. }
  74. .select-con .mui-scroll-wrapper ul{
  75. padding: 0.1rem 0;
  76. }
  77. .select-con .mui-scroll-wrapper li{
  78. padding: 0 0.26rem;
  79. line-height: 0.58rem;
  80. font-size: 0.186rem;
  81. color: #333;
  82. }
  83. .select-con .mui-scroll-wrapper li.active{
  84. color: #CE3D3A;
  85. }

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

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

相关文章

  • MUI仿京东App地址选择

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

    陈伟 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<