vue-concise-slider vue滑动组件

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-concise-slider vue滑动组件相关的知识,希望对你有一定的参考价值。

中文 | English

vue-concise-slider

vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

版本

v2.2.0 支持vue2.0+

特点

  • 简单配置

  • 轻量 (~17.8kB gzipped)

  • 多种滑动样式

目前已实现

  • [x] 全屏自适应

  • [x] 移动端兼容

  • [x] 垂直滚动

  • [x] 定时自动切换

  • [x] 不定宽度滚动

  • [x] 无缝循环滚动

  • [x] 多级滚动

未来将实现

  • [ ] 渐变滚动

  • [ ] 视差效果

链接

安装

  npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一个框架包裹slider -->
 <div style="width:70%;margin:20px auto;height:400px">
      <!-- 配置slider组件 -->
      <slider :pages="pages" :sliderinit="sliderinit" @slide=‘slide‘ @tap=‘onTap‘ @init=‘onInit‘>
          <!-- 设置loading,可自定义 -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
import slider from ‘vue-concise-slider‘// import slider components
export default {
   el: ‘#app‘,
   data () {
      return {
        //Image list
        pages:[
          {
          html: ‘<div class="slider1">slider1</div>‘,
          style: {
            ‘background‘: ‘#1bbc9b‘
            }
          },
          {
            html: ‘<div class="slider2">slider2</div>‘,
            style: {
              ‘background‘: ‘#4bbfc3‘
            }
          },
          {
            html: ‘<div class="slider3">slider3</div>‘,
            style: {
              ‘background‘: ‘#7baabe‘
            }
          }
        ],
        //Sliding configuration [obj]
        sliderinit: {
          currentPage: 0,
          thresholdDistance: 500,
          thresholdTime: 100,
          autoplay:1000,
          loop:true,
          direction:‘vertical‘,
          infinite:1,
          slidesToScroll:1,
          timingFunction: ‘ease‘,
          duration: 300
        }
      }
    },
    components: {
        slider
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

浏览器支持

现代浏览器及ie10+

贡献

  • Fork it!

  • Create your feature branch: git checkout -b my-new-feature

  • Commit your changes: git commit -am ‘Add some feature‘

  • Push to the branch: git push origin my-new-feature

  • Submit a pull request

有更好的想法?

欢迎来留下你的意见:https://github.com/warpcgd/vu...

BUG?oh no!

可以在这里提交,会尽快处理:https://github.com/warpcgd/vu...

以上是关于vue-concise-slider vue滑动组件的主要内容,如果未能解决你的问题,请参考以下文章

vue实现h5左右滑动

vue图片溢出滑动

vue 底部页面滑动,里面div不能滑动的解决

解决:vue 弹窗滑动 底部页面跟着滑动

vue前端谷歌测试正常,手机端不能滑动怎么办(安卓,苹果都不能滑动)?

vue移动端开发列表左边固定右边可以左右滑动上下滑动同步?