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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
php读取csc文件并输出
2015/05/21 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python mysql中in参数化说明
2020/06/05 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
学校安全检查制度
2014/01/27 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python