一.滚动条插件
各种不同样式滚动条
Vuescroll.js
官方文档地址
二.无缝衔接滚动
vue-seamless-scroll
安装:
npm install vue-seamless-scroll --save
main.js中添加
import vueSeamlessScroll from 'vue-seamless-scroll'
Vue.use(vueSeamlessScroll)
三.swiper
轮播图插件官方文档
- 下载
npm install swiper vue-awesome-swiper --save
- 在mian.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
- 在组件中使用
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
注意:
1⃣️使用swiper插件的时候,组件的命名不能是swiper否则会报错