zwhgithub / vue-swiper Goto Github PK

View Code? Open in Web Editor NEW

588.0 12.0 135.0 1.14 MB

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

JavaScript 68.80% HTML 0.97% Vue 30.23%

vue-swiper swiper vue-slider slider vue-swiper-component

vue-swiper's Introduction

vue-swiper

基于 Vue2.0 开发，基本满足大部分功能。
轻量、高性能轮播插件。目前支持无缝衔接自动轮播、无限轮播、手势轮播。
没有引入第三方库，原生 js 封装,打包之后只有 8.2KB 大小性能还是杠杠滴。

demo

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

Install

npm i vue-swiper-component --save
cnpm i vue-swiper-component --save  //国内镜像

Usage

import { Swiper, Slide } from 'vue-swiper-component';

components: {
    Swiper,
    Slide
}

//异步加载轮播图的情况;
  <Swiper v-if="list.length > 0">
       <Slide v-for="(item,index) in list" :key="index">
       </Slide>
  </Swiper>


 //同步加载轮播图情况
  <Swiper>
       <Slide>
               1
       </Slide>
       <Slide>
       		2
       </Slide>
       <Slide>
       		3
       </Slide>
  </Swiper>

    //加一些参数配置情况
  <Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
        <Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
        	//添加click事件
        </Slide>
   </Swiper>

API

属性	说明	默认
autoPlay	是否自动轮播	true
showIndicator	是否显示轮播的那个点	true
interval	每两次隔多久滚动一次	2500
duration	每次滚动一页需要多久时间	500

✅  Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper>

    ✅  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 保证渲染成功参考第一个示例
如果其他问题可以邮箱沟通，[email protected];
暂时对 PC 支持不是很友好，等以后有时间了可以加上;

vue-swiper's People

Contributors

Stargazers

Watchers

Forkers

busybobo fffff0001 mis-tian tanliang007 ljc313282038 296944207 sol1itude shadownc yuhac ruanzhixiong sjf1256754123 loveshuffle haoht crazyyang97 angleguan yytango zhaozhinan msunne lxchunn youngjudge htianer idhong 724888 zr8091 suwakokochiya wpstarnice yan-zzzz itcto zbl19962 925800521 weixincaishang leitiannian frsot373 kapucino mbsgood xueshiyang lch88888888 zjq1394288160 itnannan apollo-zz songda1013 listeningltg 5201314999 singod imlimiao xincao809335489 qdwudongyu libin1991 theonewang wga199 xkh kaisar420 littlombie vue-components renxiaoni z740493980 moosechan21 bokebi hujie1994 hhy5277 fynn90 yusilong gelucrow yancyji xingnianping chenlin1 akesure 15930979032 yulin3 jamesyu89 pengbo8 xminger dalu666 stevenzazz fuzengyao mori-wcy freedom987 xiaorongkui 528848 southwind0922 liuyanansiyu yy249357 rayl6 you411305469 gittboy ankhze gxuebin xuyaofang swh2017 hui-fly itringc yinhan123456 caihongzhiyue ynmldwsp shervinchen dlutwuwei glwz2017 jiangsumadai ityiquan kingkee

vue-swiper's Issues

直接手机扫码的demo，左右滑动图片，图片会闪跳一下再执行滑动效果

一个vue文件内，添加多个swiper会出问题吗？

作者大神你好，

我目前用本地静态img测试，在同一个vue文件内，第一个轮播动画乱了，第二个无法播放，小圆点数量也double了

想请教下，是否这个组件暂时还不支持多个使用？或者用v-for动态数据就好了？谢谢~新年快乐

HTML：

     <div class="swiper-wrapper">
        <Swiper v-if="list.length > 0" interval="5000" duration="1000">
          <Slide v-for="(item,index) in list" :key="index">
            <img :src="item.img">
          </Slide>
        </Swiper>
      </div>

JS：

data(){
      return{
        list:[
          {img: require('static/img/02.png')},
          {img: require('static/img/03.png')},
          {img: require('static/img/04.png')},
          {img: require('static/img/05.png')},
          {img: require('static/img/06.png')},
        ]
      }
    }

CSS：

.swiper-wrapper{
    padding: 0 10px;
  }
  /*小圆点顶下去*/
  .wh_content /deep/{
    padding-bottom: 56px;
  }
  /*小圆点的样式*/
  .wh_content /deep/ .wh_show_bgcolor {
    background: $font;
  }

为什么我设置“ :autoPlay='false' :showIndicator='false' ”都没有效果？

如何把底部点的分页方式换成数字形式的分页方式？

如何把底部点的分页方式换成数字形式的分页方式？
只有showIndicator可以设置吗？
想要自定义成数字形式的分页怎么操作呢

.wh_show_bgcolor 覆盖color失败

我直接设置它的background-color时没有反应，请问我应该如何覆盖它的color值呢？

typescript支持

import Vue from 'vue'

declare class Swiper extends Vue {
  autoPlay: boolean
  duration: number
  interval: number
  showIndicator: boolean
}

declare class Slide extends Vue {

}

export {
  Swiper, Slide
}

transtionend

transtionend是每次轮播 index 变化后才监听到，有没有轮播开始变化时的监听方法。我在源码中只看到了transtionend，似乎没有了，希望能加上。

图片不加载

您的这个轮播插件，我拿到项目里面，出现了一个问题，图片加载不出来(图片全部显示空白)，如果刷新页面，图片会闪烁一下，然后变空白，我想知道这个问题，出在了哪里，您遇到过这样的问题吗

<Slide>

<Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
//添加click事件

往sliderReal里面添加一张图片，但是这张图片不能够直接进行轮播显示；slidesReal已经确认添加进图片了

命名可以稍微语义化一点吗

想学习下源码，但是里面的变量和方法的命名，比如s,m, wh等让人不能直观的知道在干什么。

我在学习VUE总用到了您的插件，确实很不粗，但是提几点改进意见：1、可否增加参数配置，播放到最后一张图片是否从第一张循环播放；2、增加参数，配置同一块屏幕内露出前一张躲到，后一张多少。提一个小问题，组件对上下滑动不敏感，体验较差。个人意见，多有得罪。建议参考微信小程序的swiper，https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html