本文主要是介绍vue中引入swiper(vue中的滑块组件vue-awesome-swiper)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
第一步安装npm install vue-awesome-swiper --save
第二部在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
然后就可以在组件中使用该插件
- <template>
- <div>
- <swiper :options="swiperOption" ref="mySwiper">
- <!-- 这部分放你要渲染的那些内容 -->
- <swiper-slide v-for="item in items">
- </swiper-slide>
- <!-- 这是轮播的小圆点 -->
- <div class="swiper-pagination" slot="pagination"></div>
- </swiper>
- </div>
- </template>
- <script>
- import { swiper, swiperSlide } from 'vue-awesome-swiper'
- export default {
- components: {
- swiper,
- swiperSlide
- },
- data() {
- return {
- swiperOption: {
- //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
- notNextTick: true,
- pagination: '.swiper-pagination',
- slidesPerView: 'auto',
- centeredSlides: true,
- paginationClickable: true,
- spaceBetween: 30,
- onSlideChangeEnd: swiper => {
- //这个位置放swiper的回调方法
- this.page = swiper.realIndex+1;
- this.index = swiper.realIndex;
- }
- }
- }
- }
- }
- </script>
- <style>
- </style>
这篇关于vue中引入swiper(vue中的滑块组件vue-awesome-swiper)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
