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

Jaden 发布于2019-08-05 12:42 / 1559人阅读

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 支持不是很友好，等以后有时间了可以加上;

idc机房托管云服务器 vue2.0 cdn js轮播视频插件基于安卓开发安卓基于什么开发

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

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

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

vue-swiper 基于 Vue2.0 开发，基本满足大部分功能轻量、高性能轮播插件。目前支持无缝衔接自动轮播、无限轮播、手势轮播没有引入第三方库，原生 js 封装,打包之后只有 8.2KB 大小性能还是杠杠滴 demo showImg(https://segmentfault.com/img/remote/1460000012630045?w=280&h=280); ? 觉得好用给...

idealcn 2019-08-21 18:28 评论0 收藏0
基于vue实现swipe轮播组件

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

Enlightenment 2019-08-22 10:42 评论0 收藏0
基于vue实现swipe轮播组件

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

lavor 2019-08-05 10:19 评论0 收藏0
swiper的使用

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

makeFoxPlay 2019-08-22 16:24 评论0 收藏0
swiper的使用

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

MyFaith 2019-08-02 10:14 评论0 收藏0