分享vue里swiper的一些坑

 更新时间:2018年08月30日 14:10:25   作者:风雪Shang  
这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

实例: 错误(无法显示出分页器按钮,此功能不适用与for循环出来的图片,只有当该页面图片固定几张时能正常用)

第一步: 安装  npm i swiper (vue插件自带)

第二步: 在当前页面里引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步:当然呐,或许你在想内容呐,别急,为了大家的方便内容的写法我也会提供

<html代码>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="item in swiperitem"><img :src="item.thumb"></div>(for循环)(tip: 可以把for循环换成正常展示图片,如下面展示方法,每张图对应的放进去,分页器是可以用的,for循环这样分页器是无法显示与切换的)
    < !--<div class="swiper-slide"><img src="http://cdn.qcacg.com//img/Illustration/11_02.jpg"></div>-->(当然,你也可以根据上面for循环里有几条数据添加几个这个div,img路径可有可无,有也不会展示,分页器是根据swiper-slide判断显示与切换轮播的)
  </div>
  <div class="swiper-pagination swiprRem"></div>(分页器)
 </div>
<js>

vue初始化请求里添加该方法

mounted () {
  var that = this;
  that.$nextTick(function(){
    var mySwiper = new Swiper(".swiper-container",{ 
      direction:"horizontal",/*横向滑动*/ 
       loop:true,形成环路(即:可以从最后一张图跳转到第一张图 
      pagination:".swiper-pagination",/*分页器*/ 
       autoplay:3000/*每隔3秒自动播放*/ 
    });
  })
 },

css就不多说了,控制大小应该都会.

接下来说第二个正确且简单的方法

正确:

第一步: 安装  npm i vue-awesome-swiper --save( 这一个是否安装根据实际情况,如果安装上一个你用没效果也要安装这个 =>  npm i swiper )

第二步: 在main.js文件里引入

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

在当前页面引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步;

<html>
<swiper :options="swiperOption">
  <swiper-slide v-for="items in allData.bannerphoto" key="items">
    <img :src="items" alt="">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div> (分页器)
</swiper>

在data里定义轮播图

swiperOption: {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  autoplay: 2500,
  autoplayDisableOnInteraction: false,
  loop: false,
  coverflow: {(轮播图切换方式)
    rotate: 30,
    stretch: 10,
    depth: 60,
    modifier: 2,
    slideShadows : true
  }
},

关于swiper在vue里的分享就到这里了,各位用的感觉阔以的帮忙点个赞呗,毕竟写了这么多,嘿嘿.关于swiper常用的目前踩到的坑就在这里,后续有会持续更新哟

补充一下:swiper在vue中的用法

首先通过npm i vue-awesome-swiper --save 来在vue中下载插件

然后再main.js中引入

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

接着在需要用到的组件里结构中插入代码

<div class="banner">
 <swiper :options="swiperOption">
 <swiper-slide v-for="items in allData.bannerphoto" key="items">
 <img :src="items" alt="">
 </swiper-slide>
 <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
 <div class="jc"></div>
 </div>

然后在data中定义轮播图

swiperOption: {
 pagination: '.swiper-pagination',
 paginationClickable: true,
 autoplay: 2500,
 autoplayDisableOnInteraction: false,
 loop: false,
 coverflow: {
  rotate: 30,
  stretch: 10,
  depth: 60,
  modifier: 2,
  slideShadows : true
  }
 },

此时的coverflow是轮播图切换的方式 更改属性可切换轮播模式

总结

以上所述是小编给大家介绍的vue里swiper的一些坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue自定义数字输入框组件

    vue自定义数字输入框组件

    这篇文章主要为大家详细介绍了vue自定义数字输入框组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • VUE开发分布式医疗挂号系统的医院设置页面步骤

    VUE开发分布式医疗挂号系统的医院设置页面步骤

    这篇文章主要为大家介绍了VUE开发分布式医疗挂号系统的医院设置页面步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • vuex实现的简单购物车功能示例

    vuex实现的简单购物车功能示例

    这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • vue3+vite使用element-plus问题

    vue3+vite使用element-plus问题

    这篇文章主要介绍了vue3+vite使用element-plus问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue使用vuedraggable实现嵌套多层拖拽排序功能

    vue使用vuedraggable实现嵌套多层拖拽排序功能

    这篇文章主要为大家详细介绍了vue使用vuedraggable实现嵌套多层拖拽排序功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue-router路由懒加载及实现的3种方式

    vue-router路由懒加载及实现的3种方式

    这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue实现横向斜切柱状图

    vue实现横向斜切柱状图

    这篇文章主要为大家详细介绍了vue实现横向斜切柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    这篇文章主要介绍了Vue 使用 Mint UI 实现左滑删除效果CellSwipe,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue生产和开发环境如何切换及过滤器的使用

    Vue生产和开发环境如何切换及过滤器的使用

    本文主要介绍了Vue生产、开发环境如何切换及过滤器的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue 2.0项目中如何引入element-ui详解

    vue 2.0项目中如何引入element-ui详解

    element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础,下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09

最新评论