vue移动端轻量级的轮播组件实现代码


Posted in Javascript onJuly 12, 2018

一个简单的移动端卡片滑动轮播组件,适用于Vue2.x

c-swipe 2.0 全新归来。重写了全部的代码,更靠谱的质量,更优秀的性能

vue移动端轻量级的轮播组件实现代码

English Document

安装

npm install c-swipe --save

使用

注册组件

// main.js
// 引入 c-swipe 主文件
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';
// 全局注册组件
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

在 .vue 单文件组件中使用:

<swipe
 v-model="index"
 style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
 <swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
 <swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
 <swipe-item style="height: 100px; line-height: 100px">item3</swipe-item>
</swipe>
new Vue({
 data: function () {
  return {
   index: 0, // two way
  };
 },
});

或者,你想在 html 标签中直接引用

<link href="../node-modules/c-swipe/dist/swipe.css" rel="external nofollow" rel="stylesheet"></head>
<script type="text/javascript" src="../node-modules/c-swipe/dist/swipe.js"></script>
var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;
new Vue({
 el: 'body',
 // 注册组件
 components: {
  'swipe': vueSwipe,
  'swipe-item': vueSwipeItem
 },
 // ...
 // ...
});

配置

选项 类型 默认 描述
v-model Number 0 绑定了当前显示卡片的索引,该数据为双向绑定,可通过更改 v-model 的值直接更改当前显示卡片
pagination Boolean true 是否需要默认样式的导航器
loop Boolean true 循环切换
autoplayTime Number 0 单位 ms,自动切换卡片的时间间隔,值为 0 时不自动切换
speed Number 300 单位 ms, 切换卡片时的过渡效果的播放时长
minMoveDistance String '20%' 成功触发切换卡片事件的最小滑动距离,可以传入百分比,如 '20%',或者传入具体像素距离,如 '80px'。

方法

swipe.reset()

c-swipe 内部将重新计算 Swipe 的宽度,并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。

例:

<swipe ref="swipe">
 <swipe-item>item1</swipe-item>
 <swipe-item>item2</swipe-item>
 <swipe-item>item3</swipe-item>
</swipe>
<script>
 export default {
  // ...
  // ...
  handleResize() {
   this.$refs.swipe.reset();
  }
  mounted() {
   // 避免上下文丢失
   this.handleResize = this.handleResize.bind(this);
   window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
   window.removeEventListener('resize', this.handleResize);
  }
  // ...
  // ...
 }
</script>

总结

以上所述是小编给大家介绍的vue移动端轻量级的轮播组件实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
Vue中使用的EventBus有生命周期
Jul 12 #Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
vue实现引入本地json的方法分析
Jul 12 #Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
JS实现将二维数组转为json格式字符串操作示例
Jul 12 #Javascript
vue路由组件按需加载的几种方法小结
Jul 12 #Javascript
You might like
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
node.js域名解析实现方法详解
2019/11/05 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
在Python web中实现验证码图片代码分享
2017/11/09 Python
快速了解Python相对导入
2018/01/12 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
详解Python中的路径问题
2020/09/02 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
费用会计岗位职责
2014/01/01 职场文书
关于环保的活动方案
2014/08/25 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL