修改scroll样式

src/pages/carConfirm/confirm-list.vue

 <template>
-  <h-view id="startList">
+  <h-view id="confirmList">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
@@ -7,16 +7,10 @@
       </div>
     </h-header>
     <Tab @getTabNum="getTabNum" />
-    <div class="search">
+    <div class="search has-header">
       <input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" >
     </div>
-    <h-content class="my-content">
-      <scroll
-        ref="scroll"
-        :updateData="[showList]"
-        :pullUp="true"
-        @pullingUp="getList"
-      >
+    <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="getList">
       <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
         <div class="left">
           <span>
@@ -47,7 +41,6 @@
         </div>
       </div>
     </scroll>
-    </h-content>
   </h-view>
 </template>
 <script>
@@ -68,7 +61,7 @@ export default {
     }
   },
   watch: {
-    'tabNum': {
+    tabNum: {
       handler (newVal, oldVal) {
         if (newVal === 0) {
           this.showList = this.undo
@@ -82,8 +75,7 @@ export default {
       this.search()
     },
   },
-  created () {
-  },
+  created () {},
   beforeRouteEnter (to, from, next) {
     next(vm => {
       vm.pagenum = 1
@@ -95,7 +87,11 @@ export default {
     search () {
       let vm = this
       let randomString = Math.floor(Math.random() * 21)
-      let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'`
+      let url =
+        process.env.basePath +
+        'car_confirm_list_query' +
+        '&index' +
+        `'${randomString}'`
       let param = {
         user_phone: window.localStorage.getItem('user_phone'),
         searchInput: vm.keyWord,
@@ -138,7 +134,11 @@ export default {
     getList () {
       let vm = this
       let randomString = Math.floor(Math.random() * 21)
-      let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'`
+      let url =
+        process.env.basePath +
+        'car_confirm_list_query' +
+        '&index' +
+        `'${randomString}'`
       let param = {
         user_phone: window.localStorage.getItem('user_phone'),
         pagesize: 10,
@@ -175,14 +175,16 @@ export default {
   },
 }
 </script>
-<style lang="less" scoped>
-#startList {
+<style lang="less">
+#confirmList {
   .search {
-    height: 52px;
     background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: 8px 12px;
+    position: absolute;
+    width: 100%;
+    z-index: 100;
+    margin-top: 52px;
+    margin-bottom: 8px;
     input {
       width: 351px;
       height: 36px;
@@ -210,7 +212,6 @@ export default {
       border: 2px solid #bcc6ff;
     }
   }
-  .my-content {
     .item {
       width: 359px;
       height: 148px;
@@ -264,7 +265,7 @@ export default {
             font-size: 14px;
             color: #4b4a4b;
             letter-spacing: 0;
-              font-weight:bold;
+            font-weight: bold;
           }
           li {
             font-family: PingFangSC-Regular;
@@ -280,6 +281,44 @@ export default {
         }
       }
     }
+    .content {
+    position: absolute;
+    top: 0;
+  }
+  .scrollContent {
+    padding-top: 2.92rem;
+    padding-bottom: 20px;
+  }
+  .tab-style {
+    width: 100%;
+    position: absolute;
+  }
+}
+.platform-ios {
+  #confirmList {
+    .scrollContent {
+      padding-top: 3.32rem;
+    }
+  }
+}
+
+@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+  .platform-ios {
+    #confirmList {
+      .scrollContent {
+        padding-top: 3.72rem;
+      }
+    }
+  }
+}
+// iPhoneXR适配
+@media (device-width: 414px) and (device-height: 896px) {
+  .platform-ios {
+    #confirmList {
+      .scrollContent {
+        padding-top: 3.72rem;
+      }
+    }
   }
 }
 </style>

src/pages/contractRepayment/contract-repayment.vue

@@ -6,9 +6,10 @@
         <span>合同还款</span>
       </div>
     </h-header>
-
-    <h-content v-if="data!==null" class="pay-content">
-      <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getList">
+    <scroll
+      v-if="data!==null"
+      ref="scroll" :updateData="[lists]" :pullUp="true" class="pay-content has-header"
+      @pullingUp="getList">
       <div v-for="(item,index) in lists" :key="index" class="contract-item">
         <div class="header">
           <img src="@/assets/contractRepayment/contract.png" alt="">
@@ -26,7 +27,7 @@
           </section>
         </div>
       </div>
-    </scroll></h-content>
+    </scroll>
     <h-content v-if="data===null" class="null">
       <div class="display">
         <img src="@/assets/contractRepayment/null.png" alt="">
@@ -325,6 +326,41 @@ export default {
     }
 
   }
+  .content {
+    position: absolute;
+    top: 0;
+  }
+  .scrollContent {
+    padding-top: 0.8rem;
+    padding-bottom: 20px;
+  }
+}
+
+.platform-ios {
+  #contract-repayment {
+    .scrollContent {
+      padding-top: 1.2rem;
+    }
+  }
+}
 
+@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+  .platform-ios {
+    #contract-repayment {
+      .scrollContent {
+        padding-top: 1.6rem;
+      }
+    }
+  }
+}
+// iPhoneXR适配
+@media (device-width: 414px) and (device-height: 896px) {
+  .platform-ios {
+    #contract-repayment {
+      .scrollContent {
+        padding-top: 1.6rem;
+      }
+    }
+  }
 }
 </style>

src/pages/contractStart/start-list.vue

@@ -6,18 +6,12 @@
         <span>合同发车</span>
       </div>
     </h-header>
-    <Tab :fatherTabNum = "tabNum" @getTabNum="getTabNum" />
-    <div class="search">
+    <Tab :fatherTabNum="tabNum" @getTabNum="getTabNum" />
+    <div class="search has-header">
       <input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" >
     </div>
-    <h-content class="my-content">
     <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getList">
-        <div
-          v-for="(item,index) in showList"
-          :key="index"
-          class="item"
-          @click="changePage(item)"
-        >
+      <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(item)">
         <div class="left">
           <span>
             <img src="@/assets/contractStart/icon.png" >
@@ -47,7 +41,6 @@
         </div>
       </div>
     </scroll>
-    </h-content>
     <bottom-tab>
       <tab-button class="add" @click.native="goAdd">新增发车</tab-button>
     </bottom-tab>
@@ -94,13 +87,16 @@ export default {
       this.search()
     },
   },
-  created () {
-  },
+  created () {},
   methods: {
     search () {
       let vm = this
       let randomString = Math.floor(Math.random() * 21)
-      let url = process.env.basePath + 'car_apply_list_query' + '&index' + `'${randomString}'`
+      let url =
+        process.env.basePath +
+        'car_apply_list_query' +
+        '&index' +
+        `'${randomString}'`
       let param = {
         user_phone: window.localStorage.getItem('user_phone'),
         searchInput: vm.keyWord,
@@ -120,7 +116,9 @@ export default {
       vm.done = []
       vm.tabNum = 0
       vm.undo = vm.lists.filter(i => {
-        return i.car_start_status === 'REJECTED' || i.car_start_status === 'NEW'
+        return (
+          i.car_start_status === 'REJECTED' || i.car_start_status === 'NEW'
+        )
       })
       vm.done = vm.lists.filter(i => {
         return i.car_start_status === 'APPROVED'
@@ -149,7 +147,11 @@ export default {
     getList () {
       let vm = this
       let randomString = Math.floor(Math.random() * 21)
-      let url = process.env.basePath + 'car_apply_list_query' + '&index' + `'${randomString}'`
+      let url =
+        process.env.basePath +
+        'car_apply_list_query' +
+        '&index' +
+        `'${randomString}'`
       let param = {
         user_phone: window.localStorage.getItem('user_phone'),
         pagesize: 10,
@@ -186,14 +188,16 @@ export default {
   },
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
 #startList {
   .search {
-    height: 52px;
     background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: 8px 12px;
+    position: absolute;
+    width: 100%;
+    z-index: 100;
+    margin-top: 52px;
+    margin-bottom: 8px;
     input {
       width: 351px;
       height: 36px;
@@ -221,7 +225,6 @@ export default {
       border: 2px solid #bcc6ff;
     }
   }
-  .my-content {
   .item {
     width: 359px;
     height: 148px;
@@ -291,10 +294,49 @@ export default {
       }
     }
   }
-  }
   .add {
     color: #fff;
     background-color: #0041c4;
   }
+  .content {
+    position: absolute;
+    top: 0;
+  }
+  .scrollContent {
+    padding-top: 2.92rem;
+    padding-bottom: 20px;
+  }
+  .tab-style {
+    width: 100%;
+    position: absolute;
+  }
+}
+
+.platform-ios {
+  #startList {
+    .scrollContent {
+      padding-top: 3.32rem;
+    }
+  }
+}
+
+@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+  .platform-ios {
+    #startList {
+      .scrollContent {
+        padding-top: 3.72rem;
+      }
+    }
+  }
+}
+// iPhoneXR适配
+@media (device-width: 414px) and (device-height: 896px) {
+  .platform-ios {
+    #startList {
+      .scrollContent {
+        padding-top: 3.72rem;
+      }
+    }
+  }
 }
 </style>

src/pages/financingTrial/financing-trial.vue

@@ -59,9 +59,9 @@
 </template>
 
 <script>
-  export default {
+export default {
   name: 'FinancingTrial',
-    data() {
+  data () {
     return {
       lists: [],
       plan_price: '',
@@ -70,7 +70,7 @@
   },
   computed: {},
   watch: {},
-    beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
     next(vm => {
       if (from.name === 'ProDetailed') {
         vm.price_date_to = vm.$route.params.price_date_to // 有效日期
@@ -84,15 +84,15 @@
     })
     next()
   },
-    activated() {
+  activated () {
 
   },
-    created() {
+  created () {
 
   },
   methods:
       {
-        goDetails(val) {
+        goDetails (val) {
           this.$router.push({
             name: 'FinancingDetails',
             params: {
@@ -103,7 +103,7 @@
           })
         },
         // 试算查询
-        calculationQuery(val) {
+        calculationQuery (val) {
           let vm = this
           if (val) {
             let url = $config.basePath + 'prd_product_calculation_query'
@@ -140,7 +140,7 @@
           }
         },
       },
-  }
+}
 </script>
 <style lang='less'>
   #trial {

src/pages/videoSign/video-list.vue

 <template>
-  <h-view id="startList">
+  <h-view id="videoList">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
         <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
@@ -171,7 +171,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-#startList {
+#videoList {
   .search {
     height: 52px;
     background-color: #fff;