资讯专栏INFORMATION COLUMN

vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

idealcn / 1148人阅读

vue-swiper

基于 Vue2.0 开发,基本满足大部分功能

轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播

没有引入第三方库,原生 js 封装,打包之后只有 8.2KB 大小 性能还是杠杠滴

demo

? 觉得好用给一个 star 哦~ ?

github传送门 Install
npm i vue-swiper-component --save
cnpm i vue-swiper-component --save  //国内镜像
Usage
import { Swiper, Slide } from "vue-swiper-component";

components: {
    Swiper,
    Slide
}

//异步加载轮播图的情况
  
       
       
  


 //同步加载轮播图情况
  
       
               1
       
       
               2
       
       
               3
       
  

    //加一些参数配置情况
  
        
            //添加click事件
        
   
API
属性 说明 默认
autoPlay 是否自动轮播 true
showIndicator 是否显示轮播的那个点 true
interval 每两次隔多久滚动一次 2500
duration 每次滚动一页需要多久时间 500
✅  Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: 

    ✅  this.$refs.swiper.prevSlide(); // 上一张图
    ✅  this.$refs.swiper.nextSlide(); // 下一张图
    ✅  this.$refs.swiper.slideTo(2); //某一张图
事件
transtionend 事件  每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加
// @transtionend="getNum"    getNum(data) {console.log(data);}
click  事件 每个轮播图上的事件
Other

可以通过覆盖我的样式进行自定义样式,Slide 标签里面可以写 div 或者其他的东西

一些参数配置可以参考上面 Usage 第三个示例,异步渲染要加 v-if 保证渲染成功 参考第一个示例

如果其他问题可以邮箱沟通,452216418@qq.com;

暂时对 PC 支持不是很友好,等以后有时间了可以加上;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90498.html

相关文章

  • 基于vue实现swipe轮播组件

    摘要:项目背景图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如。此处应该有掌声,哈哈简而言之,就是当需要一个简单的轮播时,可以选用,自己写一个组件。举个栗子,就是我实现的这个基于实现分页组件,移动端和端均适用哦。 项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的showImg(ht...

    Enlightenment 评论0 收藏0
  • swiper的使用

    摘要:是一款轮播图插件,我是用在里面,方便省事儿。官网地址地址安装安装完成之后,我没有在中注册它,而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示,所以就没必要在全局注册它,只用在页面注册使用一下就可以了。 swipe是一款轮播图插件,我是用在vue里面,方便省事儿。swipe里面有很多关于滑动的组建,我只用过轮播图,如果以后有时间,可以再看看官网上别的组件介绍。官网地址 g...

    makeFoxPlay 评论0 收藏0
  • swiper的使用

    摘要:是一款轮播图插件,我是用在里面,方便省事儿。官网地址地址安装安装完成之后,我没有在中注册它,而是在使用页面注册的。因为通常来说轮播图只会在一个应用的首页展示,所以就没必要在全局注册它,只用在页面注册使用一下就可以了。 swipe是一款轮播图插件,我是用在vue里面,方便省事儿。swipe里面有很多关于滑动的组建,我只用过轮播图,如果以后有时间,可以再看看官网上别的组件介绍。官网地址 g...

    MyFaith 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<