'修改定位样式'

package.json

@@ -29,6 +29,7 @@
     "hls-easy-ui": "https://hel.hand-china.com/easyUI/hls-easy-ui.git#keyboard"
   },
   "devDependencies": {
+    "better-scroll": "^1.8.4",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^8.2.1",

src/pages/home/location.vue

@@ -14,6 +14,7 @@
       </div>
     </h-header>
     <section>
+      <section class="location-wrap">
         <div class="current-location">
           <div class="img-box">
             <img src="@/assets/homePage/location.png" alt="">
@@ -21,7 +22,6 @@
           </div>
           <p>当前位置</p>
         </div>
-
         <list-item>
           <item :proportion="[5,2]">
             <section slot="name" class="place">{{ places }}</section>
@@ -34,7 +34,6 @@
             </section>
           </item>
         </list-item>
-
         <div class="current-location">
           <p class="select-location" @click="switchCity">选择位置</p>
         </div>
@@ -43,19 +42,17 @@
           <p :class="{styles:flag}" @click="changeStyle(2)">{{ city }}</p>
         </div>
       </section>
-    <section>
-
       <!-- 省份 -->
-      <scroll v-show="province_flag" :pullUp="false" class="content-scroll">
-
+      <section ref="pro" class="pro-wrapper">
+        <div class="pro-content">
           <list-item :item-height="40">
             <item v-for="(item,index) in lists" :key="index" :proportion="[5,2]">
               <section slot="name" @click="selectProvince(item)">{{ item.province_name }}</section>
             </item>
           </list-item>
-      </scroll>
-
-      <!-- 城市 -->
+        </div>
+      </section>
+      <!--    &lt;!&ndash; 城市 &ndash;&gt;
           <scroll v-show="!province_flag" :pullUp="false" class="content-scroll">
 
             <list-item :item-height="40">
@@ -63,13 +60,14 @@
                 <section slot="name" @click="selectCity(item.city_name)">{{ item.city_name }}</section>
               </item>
             </list-item>
-      </scroll>
+          </scroll>-->
 
     </section>
   </h-view>
 </template>
 <script>
-export default {
+  import BScroll from 'better-scroll'
+  export default {
     name: 'Location',
     data () {
       return {
@@ -122,6 +120,11 @@ export default {
           vm.hlsHttp.post(url, param).then(function (res) {
             console.log(res)
             vm.lists = res.lists
+            vm.$nextTick(() => {
+              vm.scroll = new BScroll(vm.$refs.pro, {
+                click: true
+              })
+            })
           })
         },
         switchCity () {
@@ -172,10 +175,22 @@ export default {
           })
         },
       },
-}
+  }
 </script>
 <style lang='less' scoped>
-#location {
+  #location {
+    .location-wrap{
+      position: relative;
+      overflow: hidden;
+    }
+    .pro-wrapper{
+      position: absolute;
+      top: 205px;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+    }
     .h-header-btn {
       img {
         width: 16px;
@@ -273,5 +288,5 @@ export default {
         font-weight: 600;
       }
     }
-}
+  }
 </style>

src/styles/platform-ios.less

+.platform-ios {
+  .pro-wrapper{
+    top:225px !important;
+  }
+}

src/styles/platform-iosx.less

+// iPhoneX适配
+@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+  .platform-ios{
+    .pro-wrapper{
+      top:245px !important;
+    }
+  }
+}

src/styles/platform-iosxr.less

+// iPhoneXR适配
+@media (device-width: 414px) and (device-height: 896px){
+  .platform-ios{
+    .pro-wrapper{
+      top:245px !important;
+    }
+  }
+}

src/styles/public-style.less

@@ -6,3 +6,7 @@
     background-color: @theme-color
   }
 }
+
+@import "platform-ios";
+@import "platform-iosx";
+@import "platform-iosxr";