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 相关文章推荐
jquery实现控制表格行高亮实例
Jun 05 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
详解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调用c接口无错版介绍
2014/03/11 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python快速排序算法实例分析
2017/11/29 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
安装PyInstaller失败问题解决
2019/12/14 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
音乐器材管理制度
2014/01/31 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
小学毕业演讲稿
2014/04/25 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
长城导游词
2015/01/30 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
七年级作文之雪景
2019/11/18 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers