使用vant优化了轮播图

HEXGRID · May 12, 2021 · 879870c · 879870c
1 parent 9f8f89a
commit 879870c
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 22 deletions.
diff --git a/src/components/common/swiper/vantSwiper.vue b/src/components/common/swiper/vantSwiper.vue
@@ -0,0 +1,42 @@
+<!--vant框架的轮播图-->
+<template>
+  <van-swipe :autoplay="2000" :stop-propagation='false'>
+    <van-swipe-item v-for="(item,index) in banners" :key="index">
+      <a :href="item.link">
+        <img :src="item.image" @load="imgLoad">
+      </a>
+    </van-swipe-item>
+  </van-swipe>
+</template>
+
+<script>
+export default {
+  name:'vantSwiper',
+  props:{
+    banners:{
+      type:Array,
+      default(){
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      isLoad:true
+    };
+  },
+  methods: {
+    imgLoad(){
+      if(this.isLoad)
+        this.$emit('imgLoad')
+      this.isLoad=false
+    }
+  },
+}
+</script>
+<style scoped>
+img{
+  display: block;
+  width: 100%;
+}
+</style>
diff --git a/src/views/detail/childComps/detailSwiper.vue b/src/views/detail/childComps/detailSwiper.vue
@@ -1,14 +1,18 @@
 <!--详情轮播图-->
 <template>
-  <swiper class="detail-swiper" ref="swiper">
+  <van-swipe :autoplay="2000" class="detail-swiper">
+    <van-swipe-item v-for="(item,index) in topBanner" :key="index">
+      <img :src="item" @load="imgLoad">
+    </van-swipe-item>
+  </van-swipe>
+  <!-- <swiper class="detail-swiper" ref="swiper">
     <swiper-item v-for="(banner,index) in topBanner" :key="index">
       <img :src="banner">
     </swiper-item>
-  </swiper>
+  </swiper> -->
 </template>
 
 <script>
-import {Swiper,SwiperItem} from 'components/common/swiper'
 export default {
   name:'detailswiper',
   props:{
@@ -21,18 +25,24 @@ export default {
   },
   data () {
     return {
-      hadimgLoad:false
+      hadimgLoad:true
     };
   },
-  updated() {
-    this.$refs.swiper.handleDom()
-    this.$refs.swiper.startTimer()
+  methods: {
+    imgLoad(){
+      if(this.hadimgLoad)
+        this.$emit('imgLoad')
+      this.hadimgLoad=false
+    }
   },
-  components: {Swiper,SwiperItem},
 }
 
 </script>
 <style scoped>
+img{
+  /* height: 100%; */
+  width: 100%;
+}
 .detail-swiper{
   height: 300px;
 }

diff --git a/src/views/detail/detail.vue b/src/views/detail/detail.vue
@@ -29,7 +29,8 @@ import shopinfo from 'views/detail/childComps/detailshopinfo'
 import detailimageinfo from 'views/detail/childComps/detailImageInfo'
 import detailparamsinfo from 'views/detail/childComps/detailParamsInfo'
 import detailcomment from 'views/detail/childComps/detailcomment'
-import GoodsList from "@/components/content/goods/GoodsList"
+
+import GoodsList from "components/content/goods/GoodsList"
 import backtop from 'components/content/backTop/backTop'
 import DetailBottomBar from 'views/detail/childComps/detailBottomBar'
 
@@ -43,8 +44,8 @@ export default {
     return {
       goodsiid:null,
       isShowBackTop:false,
-      detailbanner:[],
 
+      detailbanner:[],
       goods:{},
       shop:{},
       detailsInfo:{},
@@ -53,6 +54,7 @@ export default {
       recommendList:[],
 
       detailClassList:[],
+      detailIndex:0,
 
       // 数据加载判断
       Boldetail:true,
@@ -70,9 +72,9 @@ export default {
     },
 
     // 监听两个数据请求方法是否请求完数据
-    Loading(nval,oval){
-      console.log(oval);
-      console.log(nval);
+    Loading(nval){
+      // console.log(oval);
+      // console.log(nval);
       if(!(nval.Boldetail || nval.BolRecommentList))
         this.setLoading(false)
       else
@@ -156,15 +158,14 @@ export default {
       this.isShowBackTop=detailPosition>1000
 
       // // 处理滚动时导航栏响应事件
-      let detailIndex=0
-      for(let i=0;i<this.detailClassList.length;i++){
+      for(let i=0 ; i<this.detailClassList.length ; i++){
         if(detailPosition>=this.detailClassList[i].offsetTop && detailPosition<this.detailClassList[i+1].offsetTop){
-          if(detailIndex!=i){
-            detailIndex=i
-            this.$refs.detailnav.currentIndex=detailIndex
+          if(this.detailIndex!=i){
+            this.detailIndex=i
+            try {this.$refs.detailnav.currentIndex=this.detailIndex} catch (err){err}
           }
+          break;
         }
-        break;
       }
 
     },

diff --git a/src/views/home/home.vue b/src/views/home/home.vue
@@ -19,7 +19,8 @@
     @FindScrollPosition='ContentScroll'
     :pull-up-load='true'
     @pullingUp='loadMore'>
-      <home-swiper :banners='banners' @ImageLoad='swiperLoad'></home-swiper>
+      <!-- <home-swiper :banners='banners' @ImageLoad='swiperLoad'></home-swiper> -->
+      <vant-swiper :banners='banners' @imgLoad='swiperLoad'></vant-swiper>
 
       <recommend-view :recommends='recommends'></recommend-view>
 
@@ -38,9 +39,10 @@
 import Navbar from 'components/common/navbar/navbar'
 import tabControl from 'components/content/TabControl/TabControl'
 import Scroll from 'components/common/scroll/scroll.vue'
+import vantSwiper from 'components/common/swiper/vantSwiper'
 
 // 首页组件
-import HomeSwiper from 'views/home/childComp/HomeSwiper'
+// import HomeSwiper from 'views/home/childComp/HomeSwiper'
 import RecommendView from 'views/home/childComp/HomeRecommendView'
 import feature from 'views/home/childComp/Feature'
 import GoodsList from 'components/content/goods/GoodsList'
@@ -77,7 +79,7 @@ export default {
   },
   components:{
     Navbar,
-    HomeSwiper,
+    vantSwiper,
     RecommendView,
     feature,
     tabControl,