吸顶效果处理

src/components/common/Bottom.vue

@@ -10,7 +10,7 @@
 <template>
   <!-- <div> -->
   <div class="d-bottom">
-    <van-tabbar style=" width：100%; ">
+    <van-tabbar style="width: 100%">
       <van-tabbar-item v-for="(item, index) in tabbar" :key="index">
         <div style="margin-top: 50%;" @click="btn(index)">
           <svg class="icon" aria-hidden="true">

src/views/main/Main.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-  <div class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0 50px , #ffffff); padding-bottom:20px;">
+  <div id="allItem" class="d-page d-flex flex-column" style="background-color: linear-gradient(to bottom, #0B54E0 50px , #ffffff); padding-bottom:100px; width: 100%; overflow: auto; flex-direction: column; display: flex">
     <div class="rarle">
       <tools-bar :title="tatleName" style="width: 100%; height: calc(16vh)">
       </tools-bar>
@@ -53,25 +53,13 @@
         </van-col>
       </van-row>
     </div>
-
     <div  style=" box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;" >
       <div class="prudect" style="background-color: #ffffff;">
-
-
         <van-row type="flex" justify="space-between" align="center">
-<!--
-        <van-col span="10">
-          <span color="#3672F1" style=" padding-left:10px; font-size: 16px; font-weight: 600;  " >推荐产品</span>
-        </van-col> -->
-
-       <!-- <van-col span="14"> -->
           <van-cell
         style="font-size: 12px;"
-
-
           :value="outcsinfo.place"
           @click="onAddress">
-
             <template #title>
               <span color="#3672F1" style="font-size: 16px; font-weight: 600;  " >推荐产品</span>
             </template>
@@ -79,9 +67,6 @@
             <van-icon name="location-o" size="14px"/>
          </template>
         </van-cell>
-       <!-- </van-col> -->
-
-
         </van-row>
          <van-popup
           v-model="showAddress"
@@ -96,57 +81,33 @@
             columns-num="3"
           />
         </van-popup>
-
-        <!-- <van-area title="选择区域" :area-list="areaList" /> -->
       </div>
-      <div >
-        <!-- <van-tabs v-model="activeName">
-          <van-tab title="综合排序" name="a"></van-tab>
-          <van-tab title="金额" name="b"></van-tab>
-          <van-tab title="期限" name="c"></van-tab>
-          <van-tab title="利率" name="d"></van-tab>
-        </van-tabs> -->
-       <van-row type="flex" class="tab"  >
-
+      <div>
+        <van-sticky :offset-top="0">
+       <van-row type="flex" class="tab">
           <van-col span ="18">
-
-
-
              <van-tabs  @click="onClick" style="height: 44px;" title-active-color="black" title-inactive-color="black" line-width=0px >
-
       <van-tab v-for="index in tabsList" :key="index.name" >
     <template #title  >{{index.name}}
-
-
-
-      <!-- <van-icon size="10px" class="iconfont" class-prefix="icon" :name="index.status===1? 'jiangxu' :'shengxu'"/>  -->
-
         <svg class="icon" aria-hidden="true" v-if = "index.status===1" >
           <use xlink:href="#icon-jiangxu"></use>
         </svg>
-
         <svg class="icon" aria-hidden="true" v-if = "index.status===0" >
           <use xlink:href="#icon-shengxu"></use>
         </svg>
-
-
     </template>
   </van-tab>
-
       </van-tabs>
-
           </van-col>
-          <van-col span="6">
-          <van-dropdown-menu style="height: 44px;" active-color="black" color="black">
-                    <van-dropdown-item title="综合筛选" ref="item" get-container="body">
-                        <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000"  class="product"  >
-                          
+          <van-col span="6" >
+          <van-dropdown-menu style="height: 44px;" active-color="black" color="black" >
+                    <van-dropdown-item title="综合筛选" ref="item" get-container="body" >
+              <div id="dropdown">
             <div
               class="application"
               v-for="(item, index) in applicaList.slice(0, 1)"
               :key="index.name"
             >
-
               <van-row type="flex" class="applicationName">
                 <van-col span="24">{{ item.name }}</van-col>
               </van-row>
@@ -159,7 +120,6 @@
                   <div class="vandiv">{{ item.max }}</div>
                 </van-col>
               </van-row>
-
               <van-row type="flex" gutter="10" class="applicationfole">
                 <!-- div-->
                 <van-col span="6">
@@ -201,7 +161,6 @@
                     <div class="vandiv">{{ item.max }}</div>
                   </van-col>
                 </van-row>
-
                 <van-row type="flex" gutter="10" class="applicationfole">
                   <!-- div-->
                   <van-col span="6">
@@ -226,7 +185,6 @@
                   </van-col>
                 </van-row>
               </div>
-
               <div
                 class="application"
                 v-for="(item, index) in applicaList.slice(3, 4)"
@@ -244,7 +202,6 @@
                     <div class="vandiv">{{ item.max }}</div>
                   </van-col>
                 </van-row>
-
                 <van-row type="flex" gutter="10" class="applicationfole">
                   <!-- div-->
                   <van-col span="6">
@@ -269,7 +226,6 @@
                   </van-col>
                 </van-row>
               </div>
-
               <div
                 class="application"
                 v-for="(item, index) in applicaList.slice(2, 3)"
@@ -287,7 +243,6 @@
                     <div class="vandiv">{{ item.max }}</div>
                   </van-col>
                 </van-row>
-
                 <van-row type="flex" gutter="10" class="applicationfole">
                   <!-- div-->
                   <van-col span="6">
@@ -312,7 +267,6 @@
                   </van-col>
                 </van-row>
               </div>
-
             <div style="margin-top: 4%">
               <van-row type="flex">
                 <van-col span="12">
@@ -323,29 +277,14 @@
                 </van-col>
               </van-row>
             </div>
-
-            
-            <!-- <div style="padding-top:200px;" >
-                          </div> -->
-                        </scroller-view>
+              </div>
           </van-dropdown-item>
             </van-dropdown-menu>
-
-
             </van-col>
-
       </van-row>
-
+        </van-sticky>
       </div>
-
-
-
-
-
-
-
       </div>
-      <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000"  class="product"  >
         <div
           v-for="(item, index) in productList"
           :key="index"
@@ -362,10 +301,7 @@
             @onClickPicket="onClickPicket"
           ></picket-bar>
         </div>
-
-      </scroller-view>
     </div>
-
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
@@ -377,8 +313,10 @@ import { Cell, CellGroup } from 'vant';
 import { Tabbar, TabbarItem } from 'vant';
 import { Tab, Tabs } from 'vant';
 import{area}from "../../model/domain/areaData";
-import '../../assets/iconfont/iconfont.css'
-import '../../assets/iconfont/iconfont.js'
+import '../../assets/iconfont/iconfont.css';
+import '../../assets/iconfont/iconfont.js';
+import { Sticky } from 'vant';
+Vue.use(Sticky);
 Vue.use(Cell);
 Vue.use(CellGroup);
 Vue.use(Area);
@@ -445,17 +383,6 @@ export default class Main extends Vue {
 		};
 
 
-//  created(){
-  
-//       document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
-//   }
-
- activated(){
-
-    document.addEventListener('touchmove', event => {    event.preventDefault()  }, { passive: false });
-  }
-     
-
 
 
   //测试