<template>
<div id="PcHeader" >
<swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0" >
<swiper-slide v-for="(item,index) in banner" :key="index" >
<img :src="item.image" alt="" :style="lineWidth"/>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: "PcHeader",
comments:{
swiper,swiperSlide
},
data(){
return {
/*获取可见区域宽度*/
lineWidth:{
width:document.documentElement.clientWidth+"px"
},
banner:[
{image:require("../assets/images/banner1.jpg")},
{image:require("../assets/images/banner2.jpg")},
{image:require("../assets/images/banner3.jpg")},
{image:require("../assets/images/banner4.jpg")}
],
imgIndex:1,
swiperOption: {
//是一个组件自有属性,如果notNextTick设置为true,
// 组件则不会通过NextTick来实例化swiper,
// 也就意味着你可以在第一时间获取到swiper对象,
// 假如你需要刚加载遍使用获取swiper对象来做什么事,
// 那么这个属性一定要是true
notNextTick: true,
//循环
loop: true,
//设定初始化时slide的索引
initialSlide: 0,
//自动播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
/* 触摸滑动后是否继续轮播 */
disableOnInteraction: false
},
//滑动速度
speed: 800,
//滑动方向
direction: "horizontal",
//小手掌抓取滑动
grabCursor: true
}
}
},
methods:{
}
}
</script>
<style scoped lang="less">
#PcHeader{
font-size: 1.25rem;
.el-row:nth-child(1){
height:4rem;
line-height:4rem;
}
}
</style>
main文件的配置
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vueSwiper from 'vue-awesome-swiper'
import Vant from 'vant';
import 'vant/lib/index.css';
/* 样式的话,我这里有用到分页器,就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
Vue.use(Vant)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')