js实现移动端编辑添加地址

效果图：

注：这里的数据格式用的是jsonp，json在这里存在跨域问题

代码如下：

 
 
 
 
 
 
 
  html, body {
   font-size: 10px
  }
  @media screen and (min-width:321px) and (max-width:375px) {
   html {
    font-size: 10px
   }
  }
  @media screen and (min-width:376px) and (max-width:414px) {
   html {
    font-size: 10px
   }
  }
  @media screen and (min-width:415px) and (max-width:639px) {
   html {
    font-size: 12px
   }
  }
  @media screen and (min-width:640px) and (max-width:719px) {
   html {
    font-size: 12px
   }
  }
  @media screen and (min-width:720px) {
   html {
    font-size: 16px
   }
  }
  html, body, ol, ul, li, a, div, input, label, form, textarea, span, h1, h2, h3, h4, h5, h6, p {
   padding: 0;
   margin: 0;
   font-weight: normal;
   box-sizing: border-box
  }
  html, body {
   font-family: "microsoft YaHei", arial;
   width: 100%;
   height: auto;
   overflow-x: hidden
  }
  i, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block
  }
  ul, ul li {
   list-style-type: none
  }
  a {
   outline: none;
   text-decoration: none;
   color: black
  }
  img {
   outline: none !important;
   border: none
  }
  input, textarea {
   outline: none;
   font-family: "microsoft YaHei", arial;
   font-size: 1.6rem
  }
  header.public-header {
   height: 50px;
   padding: 0 10px;
   background: white;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 99;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
   -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
   -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
  }

  
  header.public-header ..public-header-content {
   width: 100%;
  }
  header.public-header .public-header-content .public-logo a {
   display: block;
   height: 50px;
   width: 170px;
  }
  header.public-header .public-logo img {
   height: 100%;
   width: 100%;
  }
  header.public-header .public-header-content .btn-back {
   position: absolute;
   left: 0.5rem;
   top: 1rem;
   font-size: 3rem;
  }
  header.public-header .public-header-content .btn-back::after{
   content: "";
   height: 15px;
   width: 15px;
   border-left: 1px solid #393a3f;
   border-bottom: 1px solid #393a3f;
   background: white;
   position: absolute;
   left: 10px;
   top: 5px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg)
  }
  header.public-header .public-header-content h1 {
   font-size: 1.8rem;
   text-align: center;
   line-height: 50px;
  }


  
  .form-group {
   height: 40px;
   line-height: 40px;
   padding: 0 10px;
   position: relative
  }
  .form-group::after {
   border-bottom: 1px solid #ccc;
   content: ' ';
   display: block;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
   -webkit-transform-origin: left bottom;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5)
  }
  .form-group .form-label {
   font-size: 1.6rem
  }
  .form-group .input-flex {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   ms-flex: 1;
   border: none;
   font-size: 1.4rem
  }
  .icon-trangle {
   height: 10px;
   width: 10px;
   border-top: 1px solid #B1B0B0;
   border-right: 1px solid #B1B0B0;
   background: white;
   position: absolute;
   right: 10px;
   top: 15px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg)
  }

  
  .toogle-address-mask {
   height: 100%;
   width: 100%;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.2);
   z-index: 99;
   opacity: 0
  }
  .toogle-address {
   height: 300px;
   width: 100%;
   background: white;
   position: fixed;
   z-index: 99;
   bottom: -300px;
   left: 0;
  }
  .toogle-address .toogle-address-title {
   height: 40px;
   line-height: 40px;
   font-size: 1.6rem;
   text-align: center
  }
  .icon-close {
   height: 25px;
   width: 25px;
   display: block;
   position: absolute;
   right: 10px;
   top: 5px;
   background: red;
   background-size: 15px 15px;
  }
  .address {
   width: 100%;
   position: relative;
   font-size: 1.4rem;
  }
  .address-header {
   height: 40px;
   line-height: 40px;
   border-bottom: 1px solid #eaeaea;
   padding: 0 10px;
  }
  .address-header .address-info {
   font-size: 1.4rem;
   float: left;
   padding: 0 5px;
  }
  .address-content {
   width: 100%;
   height: 320px;
   overflow: hidden;
  }
  .address-now {
   position: relative;
  }
  .address-now::after {
   position: absolute;
   content: "";
   left: 0;
   bottom: 0;
   background: #008aff;
   height: 2px;
   width: 100%;
  }
  .box-flex {
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex
  }
  .flex {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   ms-flex: 1
  }
  .address-cont {
   height: 320px;
   display: flex;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   width: 300%;
   overflow-y: scroll;
  }
  .provienc-part, .city-part, .county-part {
   height: 100%;
   width: 100%;
  }
  .provienc-part {

   
  }
  .city-part {

   
  }
  .county-part {

   
  }
  .address-cont ul{
   padding: 0.5rem 1rem ;
  }
  .address-cont ul li {
   font-size: 1.4rem;
   padding: 0.5rem 0;
  }
  .liNow {
   color: #008aff;
  }
  #city, #county {
   display: none;
  }
  
  .section-address {
   margin-top: 50px;
  }
 




 
  
  
  配送地址
 




 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网!