vue轮播图组件

vue.js------轮播图组件

index.vue:

 <div>
        <!-- 轮播图组件 -->
        <swipe :adData = indexAd v-if="cid==0" />
   </div>
// 轮播图组件引入、
<script>
import swipe from "@/components/cateIndex/swipe"; 
export default {
  components: {
    swipe,
  },
  data() {
    return {
      indexAd: {
        swiper1: [],
        swiper2: [],
        indexAd: []
      },
    };
  },
  mounted() {
    this.loadCatList();
  },
  methods: {
    loadCatList() {
      //  轮播图接口
       this.getRequest('/index/getIndexAd',{ucode:user_id}).then(data=>{
          if(data.code == 0){
            this.indexAd = data.data
          }
        });
    },
  },
};
</script>

轮播图组件页面：swiper.vue

<template>
  <div id="swipeHan">
    <!-- 轮播图 -->
    <div class="swipeOne">
      <van-swipe :autoplay="3000" class="swipper swipperOne">
        <van-swipe-item v-for="(item,index) in adData.swiper1"  :key="index">
          <img :src="item.img" alt="图片正在加载中,请稍等..."  @click="jump(item)"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 3个 -->
    <div class="swipeTwo">
      <ul class="handtwo">
        <li v-for="(item,index) in adData.indexAd"  :key="index">
          <img :src="item.img" alt="图片正在加载中,请稍等..." @click="jump(item)" />
        </li>
      </ul>
    </div>
    <!-- 活动专区 -->
    <div class="swipeThree">
      <img src="@img/huodong_bg.png" alt="图片正在加载中,请稍等..." />
      <!-- 轮播图二 -->
      <van-swipe :autoplay="3000" indicator-color="white" class="swperT">
        <van-swipe-item  v-for="(item,index) in adData.swiper2"  :key="index">
          <img :src="item.img" alt="图片正在加载中,请稍等..."  @click="jump(item)" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
import util from "@lib/Util"; // 引入
export default {
  name: "swipeHan",
  props:{
    adData:{
       type:Object,
       default:function(){
         return {
          swiper1: [],
          swiper2: [],
          indexAd: []
         }
       }
    }
  },
  data() {
    return {};
  },
  methods: {
    jump(item){
      console.log(item.title)
      util.goAd(item);
    }
  }
};
</script>
<style scoped lang="scss">
.swipper {
  width: 100%;
  //  ?
  height: calc((100vw - 0.4rem) * 400 / 1182);
}

.swperT {
  width: 100%;
   //  ?
  height: calc((100vw - 0.4rem) * 205 / 750);
}
#swipeHan {
  padding: 0 0.2rem;
}
/* 轮播图一 */
.swipeOne {
  .swipperOne {
    width: 100%;
    border-radius: 0.1rem;
    overflow: hidden;
    img {
      width: 100%;
      display: block;
    }
  }
  .van-swipe__indicator--active {
    background: rgb(224, 67, 45);
  }
  .van-swipe__indicators {
    position: absolute;
    top: 80%;
    left: 50%;
  }
}

/* 3个 */
.swipeTwo {
  .handtwo {
    width: 100%;
    display: flex;
    margin-top: 0.2rem;
    justify-content: space-between;
    height: calc(99.6vw * 240 / 444 * 0.32);
    li {
      width: 32%;
      height: calc(99.6vw * 240 / 444 * 0.32);
      img {
        width: 100%;
        display: block;
      }
    }
  }
}

/*活动专区 */
.swipeThree {
  width: 100%;
  font-size: 0;
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  & > img {
    margin-bottom: 0.2rem;
    width: 50%;
    display: block;
  }
  .swperT {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>

Ps:欢迎讨论交流,嘻嘻🤭…