原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

vue轮播图插件vue-concise-slider的使用

PHP中文网 • • 编程技术 • 阅读 2

这篇文章主要介绍了vue轮播图插件vue-concise-slider的使用，现在分享给大家，也给大家做个参考。

vue-concise-slider

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

版本

v2.4.7 支持vue2.0+

立即学习“前端免费学习笔记（深入）”；

特点

简单配置

轻量 (~24kB gzipped)

多种滑动样式

目前已实现

全屏自适应

移动端兼容

垂直滚动

定时自动切换

不定宽度滚动

无缝循环滚动

多级滚动

渐变滚动

旋转滚动

page中加入自定义组件

未来将实现

渐变滚动

视差效果

链接

文档

demo

安装

npm install vue-concise-slider --save

登录后复制

如何使用

 
                
loading...
    
import slider from 'vue-concise-slider'// import slider componentsexport default {  el: '#app',  data () {   return {    //Image list    pages:[     {     html: '
slider1',     style: {      'background': '#1bbc9b'      }     },     {      html: '
slider2',      style: {       'background': '#4bbfc3'      }     },     {      html: '
slider3',      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)   }  }}

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

浅谈Vue内置component组件的应用场景

vue2中使用less简易教程

vue-cli脚手架-bulid下的配置文件

以上就是vue轮播图插件vue-concise-slider的使用的详细内容，更多请关注【创想鸟】其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753381.html

赞 (0)
0 0

关于作者

PHP中文网的头像

PHP中文网签约作者

432.7K 文章
0 评论
1 粉丝
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
上一篇 2025年3月8日 06:36:50
下一篇 2025年3月5日 21:06:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    下面我就为大家分享一篇解决vue单页使用keep-alive页面返回不刷新的问题，具有很好的参考价值，希望对大家有所帮助。 使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • 详解vuex的简单使用

    这篇文章主要介绍了详解vuex的简单使用,现在分享给大家，也给大家做个参考。 1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,in…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200
  • 如何使用Vue.js实现微信公众号菜单编辑器（思路详解） 编程技术

    如何使用Vue.js实现微信公众号菜单编辑器（思路详解）

    这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器（思路详解），使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。 学习一段时间Vue.js，于是想尝试着做一个像微信平台里那样的菜单编辑器，在…

    PHP中文网的头像 PHP中文网
    2025年3月8日
    200
  • 如何使用Vue.js实现微信公众号菜单编辑器（案例代码） 编程技术

    如何使用Vue.js实现微信公众号菜单编辑器（案例代码）

    这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器（案例代码），使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。 实现菜单删除方法 在vue实例中添加删除菜单方法，根据选中的菜单级别和索引来…

    PHP中文网的头像 PHP中文网
    2025年3月8日
    200
  • 如何使用vue.js做出编辑菜谱功能 编程技术

    如何使用vue.js做出编辑菜谱功能

    这次给大家带来如何使用vue.js做出编辑菜谱功能，使用vue.js做出编辑菜谱功能的注意事项有哪些，下面就是实战案例，一起来看一下。 1、先获取门店下的所有菜品类型、菜品名称、菜品id(list)，也就是最大数据量 this.$http.…

    PHP中文网的头像 PHP中文网
    2025年3月8日
    200

  • 怎样使用angularjs做出购物金额计算工具

    这次给大家带来怎样使用angularjs做出购物金额计算工具，怎样angularjs做出购物金额计算工具的注意事项有哪些，下面就是实战案例，一起来看一下。 当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angu…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • 怎样使用V-Distpicker组件

    这次给大家带来怎样使用V-Distpicker组件，使用V-Distpicker组件的注意事项有哪些，下面就是实战案例，一起来看一下。 1、安装 使用 npm 安装： npm install v-distpicker –save 登录后复…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • ES6中Promise使用详解

    这次给大家带来ES6中Promise使用详解，ES6中Promise使用的注意事项有哪些，下面就是实战案例，一起来看一下。 当然，这并不代表迸发成了全栈。全栈的技能很集中，绝不仅仅是前端会写一些HTML和一些交互，后台熟悉数据库的增删查改。…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • Vue数据响应使用步骤详解

    这次给大家带来Vue数据响应使用步骤详解，使用Vue数据响应的注意事项有哪些，下面就是实战案例，一起来看一下。 前言 Vue的数据响应主要是依赖了Object.defineProperty()，那么整个过程是怎么样的呢？以我们自己的想法来走…

    PHP中文网的头像 PHP中文网
    2025年3月8日 • 编程技术
    200

  • JS加载方式使用汇总

    这次给大家带来JS加载方式使用汇总，JS加载方式使用的注意事项有哪些，下面就是实战案例，一起来看一下。 一：同步加载 我们平时使用的最多的一种方式。 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

发表回复

登录后才能评论

请登录

您还未登录，请登录后再进行相关操作！

登录 注册