vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

  1. <template>
  2. <div>
  3. <swiper :options="swiperOption"  ref="mySwiper">
  4. <!-- 这部分放你要渲染的那些内容 -->
  5. <swiper-slide v-for="item in items">
  6. </swiper-slide>
  7. <!-- 这是轮播的小圆点 -->
  8. <div class="swiper-pagination" slot="pagination"></div>
  9. </swiper>
  10. </div>
  11. </template>
  12. <script>
  13. import { swiper, swiperSlide } from 'vue-awesome-swiper'
  14. export default {
  15. components: {
  16. swiper,
  17. swiperSlide
  18. },
  19. data() {
  20. return {
  21. swiperOption: {
  22. //是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
  23. notNextTick: true,
  24. pagination: '.swiper-pagination',
  25. slidesPerView: 'auto',
  26. centeredSlides: true,
  27. paginationClickable: true,
  28. spaceBetween: 30,
  29. onSlideChangeEnd: swiper => {
  30. //这个位置放swiper的回调方法
  31. this.page = swiper.realIndex+1;
  32. this.index = swiper.realIndex;
  33. }
  34. }
  35. }
  36. }
  37. }
  38. </script>
  39. <style>
  40. </style>
上一篇:Servlet中Response对象应用1(输出简单文字、实现文件下载)


下一篇:Jira在linux上安装与部署