做什么 deb save options scroll http mes pan nts
1.安装依赖
- npm install vue - awesome - swiper--save
2.引入并注册
- import Vue from ‘vue‘
- import VueAwesomeSwiper from ‘vue-awesome-swiper‘
- //也可以用require
- //var Vue = require(‘vue‘)
- //var VueAwesomeSwiper = require(‘vue-awesome-swiper‘)
- Vue.use(VueAwesomeSwiper)
3.组件中的使用
- <template>
- <div class="swiper1">
- <swiper :options="swiperOption" ref="mySwiper">
- <!-- slides -->
- <swiper-slide>I‘m Slide 1</swiper-slide>
- <swiper-slide>I‘m Slide 2</swiper-slide>
- <swiper-slide>I‘m Slide 3</swiper-slide>
- <swiper-slide>I‘m Slide 4</swiper-slide>
- <swiper-slide>I‘m Slide 5</swiper-slide>
- <swiper-slide>I‘m Slide 6</swiper-slide>
- <swiper-slide>I‘m Slide 7</swiper-slide>
- <!-- Optional controls -->
- <div class="swiper-pagination" slot="pagination"></div>
- <div class="swiper-button-prev" slot="button-prev"></div>
- <div class="swiper-button-next" slot="button-next"></div>
- <div class="swiper-scrollbar" slot="scrollbar"></div>
- </swiper>
- </div>
- </template>
- <script>
- require(‘../assets/swiper-3.4.2.min.CSS‘)
- import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
- export default {
- name:"swiper1",
- components: {
- swiper,
- swiperSlide
- },
- data() {
- return {
- swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/
- // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,<br>假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
- notNextTick: true,
- // swiper configs 所有的配置同swiper官方api配置
- autoplay: 1000,
- // direction : ‘vertical‘,
- grabCursor : true,
- setWrapperSize :true,
- autoHeight: true,
- pagination : ‘.swiper-pagination‘,
- paginationClickable :true,
- prevButton:‘.swiper-button-prev‘,//上一张
- nextButton:‘.swiper-button-next‘,//下一张
- scrollbar:‘.swiper-scrollbar‘,//滚动条
- mousewheelControl : true,
- observeParents:true,
- // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger
- debugger: true,
- }
- }
- },
- }
- </script>
- <style scoped>
- </style>
注意:需要手动引入swiper的css样式,可以去swiper的官网进行下载
vue-swiper的使用
做什么 deb save options scroll http mes pan nts
原文:http://www.cnblogs.com/ldlx-mars/p/7772868.html
来源: http://www.bubuko.com/infodetail-2377241.html