数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

排列三开奖号码:vue移动端轻量级的轮播组件实现代码

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 一个简单的移动端卡片滑动轮播组件,适用于Vue2.x

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

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移动端轻量级的轮播组件实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:


  • 本文相关:
  • 利用vue实现移动端图片轮播组件的方法实例
  • 基于vue实现swipe轮播组件实例代码
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图
  • vue开发一个图片轮播的组件示例代码
  • 实例详解ztree在vue项目中使用并且带有搜索功能
  • vue组件prop传递数据的实现示例
  • vue 去除路径中的#号
  • windows下vue-cli导入bootstrap样式
  • 解决vue 通过下表修改数组,页面不渲染的问题
  • vue基于nuxt的ssr详解
  • 详解从vue.js源码看异步更新dom策略及nexttick
  • vue实现简单loading进度条
  • vue 2.0+vue-router构建一个简单的单页应用(附源码)
  • vue实现百度下拉提示搜索功能
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2019-04-22
  • 教师节感恩祝福语大全 最美最全的祝福语都在这! 2019-04-22
  • 共产主义劳动不再是谋生手段就是劳动不再是看着就想笑鼓吹私有制下的责权利所谓平滑对接下的为生存而做资本的雇佣劳动奴隶劳动,而是在共产主义公有制里劳动由于一辈子做 2019-04-22
  • 虾仁怎么炒最下饭?答案是宫保-美食资讯 2019-04-21
  • 韩磊为江城而歌 《在此》唱出了气壮山河之势韩磊 2019-04-21
  • 林一:中国戏曲“走出国门”的新思路 2019-04-21
  • 构建人类命运共同体思想引领时代潮流 2019-04-21
  • 陕西省首届冰球联赛在西安举行 多支球队展开激烈角逐 2019-04-20
  • 国地税合并惠及当下立足长远 2019-04-20
  • 恒大耻辱!中超霸主又被升班马吊打 卡帅位置悬了! 2019-04-19
  • 河北宣讲十九大:燕赵大地起春雷 高质发展显活力 2019-04-19
  • 中共中央组织部“12380”举报网站 2019-04-19
  • 和田县驻村工作队帮助农民收小麦 2019-04-18
  • 【大阅兵历史图片集锦】 2019-04-18
  • “一地两检”条例草案在香港特区立法会通过三读 2019-04-18
  • 657| 128| 563| 604| 660| 518| 833| 691| 132| 961|