好久不写博客了,今天写了一个vue三级联动的插件使用,就索性在写个轮播的。
1.下载 cnpm i vue-swiper-component --save
(题外话:这里的i就是install的缩写,他俩基本一致,实际使用的区别点主要如下(windows下):
- 1. 用npm i安装的模块无法用npm uninstall删除,用npm uninstall i才卸载掉
- 2. npm i会帮助检测与当前node版本最匹配的npm包版本号,并匹配出来相互依赖的npm包应该提升的版本号
- 3. 部分npm包在当前node版本下无法使用,必须使用建议版本
- 4. 安装报错时intall肯定会出现npm-debug.log 文件,npm i不一定)
2.在你要使用该轮播的页面的JS中写:
import { Swiper, Slide } from 'vue-swiper-component';
components: {
Swiper,
Slide
}
3.最终该页面如下:
<template>
<div>
<Swiper ref="swiper" v-if="list.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(tag,key) in list" :key="key">
<img :src="tag.img" />
</Slide>
</Swiper>
<div><button @click="preve">上一张</button></div>
<div><button @click="next">下一张</button></div>
</div>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component';
export default {
data() {
return {
list: [
{ img: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
{ img: 'https://qiniu.epipe.cn/5430983074181545984?imageslim&imageView2/1/w/750/h/360' },
{ img: 'https://qiniu.epipe.cn/5464226412548325376?imageslim&imageView2/1/w/750/h/360' }
]
}
},
components: {
Swiper,
Slide
},
methods: {
clickMe (index){
console.log(index)
},
preve(){
this.$refs.swiper.prevSlide();
},
next(){
this.$refs.swiper.nextSlide();
}
}
}
</script>
<style>
img {
width: 100%;
}
.button {
margin-top: 30px;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
line-height: 2.33333333;
border-radius: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: hidden;
border-width: 0;
width: 50%;
padding: 0 30px 0 30px;
outline: 0;
-webkit-appearance: none;
background-color: #26a2ff;
}
.button:active {
opacity: 0.5;
color: #333;
}
.button2 {
margin-top: 100px;
}
</style>