轮播图
轮播图有很多种写法,现在我简单的写一种,自己项目中用到的
描述:轮播图自动播放,并且点击的时候进入详情页面
我把swiper写成一个组件
<template> <swiper :options="swiperOption"> <swiper-slide><img id="0" src="../../static/img/home_fz.png" alt=""></swiper-slide> <swiper-slide><img id="1" src="../../static/img/home_lhb.png" alt=""></swiper-slide> <swiper-slide><img id="2" src="../../static/img/home_lcb.png" alt=""></swiper-slide> <swiper-slide><img id="3" src="../../static/img/home_zzb.png" alt=""></swiper-slide> <swiper-slide><img id="4" src="../../static/img/home_xebx.png" alt=""></swiper-slide> <swiper-slide><img id="5" src="../../static/img/home_rb.png" alt=""></swiper-slide> <swiper-slide><img id="7" src="../../static/img/home_thb.png" alt=""></swiper-slide> <div class="swiper-button-prev" slot="button-prev" style="top: 40%"></div> <div class="swiper-button-next" slot="button-next" style="top: 40%"></div> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script> import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data () { let vm = this return { swiperOption: {//以下根据自己需要添加需求 slidesPerView: 4, spaceBetween: 30, autoplayStopOnLast: true, loop: true, autoplay: true, delay: 16, controller: true, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, on: { click (e) { let page = 3 let id = e.target.id console.log('---> e', e) if (id) { console.log('---> id', e.target.id) vm.$router.push({path: '/cpfz', query: {page: page, id: id}}) } } } } } }, methods: { } } </script> <style> .swiper-pagination { position: relative; top: -20px; color: #fff; z-index: 15; height: 50px; } .swiper-container { height: 455px; cursor: pointer; } </style>
然后在页面中引用组件代码:
<template>
<swiper></swiper>
</template>
import swiper from '../components/Swiper.vue'
export default {
name: 'logo',
components: {
swiper
}
}