直接使用swiper

package.json

@@ -23,7 +23,6 @@
     "vant": "^2.2.15",
     "vconsole": "^3.3.4",
     "vue": "^2.1.0",
-    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^2.1.1",
     "vuex": "^2.0.0",
     "web-buried-point": "^2.1.0",

src/main.js

@@ -13,11 +13,11 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 import clipboard from 'clipboard';
 import { querystring } from '@/utils';
-import VueAwesomeSwiper from 'vue-awesome-swiper'
+// import VueAwesomeSwiper from 'vue-awesome-swiper'
 // import 'swiper/css/swiper.css'
-// import 'swiper/swiper-bundle.css';
+import 'swiper/swiper-bundle.css';
 //注册到vue原型上
-Vue.use(VueAwesomeSwiper);
+// Vue.use(VueAwesomeSwiper);
 
 Vue.prototype.clipboard = clipboard;
 

src/views/annual-summary/detail.vue

 <template>
-  <div class="as-swipper-wrapper">
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">
@@ -21,9 +20,8 @@
           <Card6></Card6>
         </div>
       </div>
+      <Loading v-show="showLoading" />
     </div>
-    <Loading v-show="showLoading" />
-  </div>
 </template>
 <script>
 import Loading from "@/components/common/common-loading";
@@ -56,7 +54,7 @@ export default {
     return {
       isWeb: window.__isWeb,
       isInfresh: false,
-      showLoading: false
+      showLoading: true,
     };
   },
 
@@ -88,11 +86,10 @@ export default {
 
   mounted() {
     new Swiper(".swiper-container", {
-      // direction: "vertical",
+      direction: "vertical",
       speed: 300,
-      slidesPerView: 1,
+      slidesPerView: 1
       // slidesPerGroup : 5,
-      
     });
   },
 
@@ -144,21 +141,8 @@ export default {
   }
 };
 </script>
-<style lang="less">
-.swiper-container{width: 100%;height: 100%;}
-.swiper-container-scrollbar .swiper-slide{
-    height: auto;
-}
-.swiper-container-free-mode > .swiper-wrapper {
-  -webkit-transition-timing-function: linear;    /*之前是ease-out*/
-  -moz-transition-timing-function: linear;
-  -ms-transition-timing-function: linear;
-  -o-transition-timing-function: linear;
-  transition-timing-function: linear;
-  margin: 0 auto;
-}
-</style>
-<style lang="less" >
+
+<style lang="less" scoped>
 .as-swipper-wrapper {
   transform: translate3d(0, 0, 0);
   // background: red;
@@ -170,4 +154,14 @@ export default {
     transform: translate3d(0, 0, 0);
   }
 }
+
+.swiper-container {
+  height: 100vh;
+  width: 100vm;
+  /* height: 300px;
+  margin: 20px auto; */
+}
+.card {
+  height: 100vh;
+}
 </style>
\ No newline at end of file