C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件
近期在做的一个Vue2项目里需要一个简单的卡片滑动组件,但是又因为现有的传统轮播库功能过于繁琐和笨重。因此自己写了一个针对于Vue2.x的轻型轮播组件。
项目GitHub链接:C-Swipe Mobile 无耻的求个star
https://github.com/pspgbhu/Vue2.x-Swipe-Mobile
目前仅支持移动端。
组件通过v-model
绑定了组件当前分页索引值,这很大的方便了组件的使用者。
其实想想目前这个组件也不能叫轮播组件,因为目前是不支持自动轮播的,只支持手动左右滑动切换分页,不过后期考虑加入自动轮播等功能。
以下是组件的文档:
Vue2-C-Swipe Mobile
A swipe (touch slide) component for Vue2.x in mobile device.
Only support touch event now.
一个简单的移动端卡片滑动轮播组件,适用于Vue2.x
Install
npm install c-swipe --save
Usage
注册组件
// main.js
// import c-swipe files into main.js
import { Swipe, SwipeItem } from '../src/main.js';
// register components
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
在Vue中使用:
<swipe v-model="index" style="text-align: center; line-height: 80px;">
<swipe-item style="height: 100px;">item1</swipe-item>
<swipe-item style="height: 100px;">item2</swipe-item>
<swipe-item style="height: 100px;">item3</swipe-item>
</swipe>
new Vue({
// ...
// ...
// ...
data: function () {
return {
index: 0, // two way
};
},
});
Options
选项 | 类型 | 默认 | 描述 |
---|---|---|---|
v-model | Number | 0 | 绑定了当前显示卡片的索引,该数据为双向绑定,可通过更改 v-model 的值直接更改当前显示卡片 |
pagination | Boolean | true | 是否需要默认样式的导航器. 如果你需要自定义导航器, v-model 的值将会给你提供一定的帮助 |
time | Number | 0 | 单位 ms,自动切换卡片的时间间隔,值为 0 时不自动切换 |
Preview
用手机扫描下方二维码进行预览
License
MIT
近期不仅修复了若干的bug,还上传至了npm,欢迎大家使用。
项目GitHub链接:C-Swipe Mobile 无耻的求个star
https://github.com/pspgbhu/Vue2.x-Swipe-Mobile
C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件的更多相关文章
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- vue2.0 之 douban (四)创建Swipe图片轮播组件
swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点:html,css布局,对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- 前端 高级 (二十五)vue2.0项目实战一 配置简要说明、代码简要说明、Import/Export、轮播和列表例子
一.启动服务自动打开浏览器运行 二.配置简要说明 1.node_modules 安装好的依赖文件,中间件等,所在位置 2.package.jason 配置当前项目要安装的中间件和依赖文件 { &quo ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
随机推荐
- iOS KVC setValuesForKeysWithDictionary的使用
Key Value Coding Key Value Coding是cocoa的一个标准组成部分,它能让我们可以通过name(key)的方式访问property, 不必调用明确的property ac ...
- 23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]
在本节中将要加入各种类型的字段,在加入字段的时候由于可以一行加入多个字段,因此层次结构又多了一层fieldcontainer.form里面的主要层次结构如下: form -- fieldSet -- ...
- tp框架中的静态验证
//制定命名空间在Home 模块下Model文件夹下 如:namespace Home\Model; //引用父类 如:use Think\Model; //实例化表 如:class ZhuCeMod ...
- 如何解决Visual Studio2012 与此版本的Windows不兼容
解决方案: http://www.microsoft.com/zh-CN/download/details.aspx?id=36020 下载更新
- Uber广州车主官网本周将暂关闭
Uber广州车主官网本周将暂关闭 http://news.southcn.com/g/2015-05/04/content_123509931.htm
- 如何用 Git 合并两个库,并保留提交历史
转载自 https://segmentfault.com/a/1190000000678808 背景 一个中型规模项目,开始规划时就打算采用 C/S 架构,后端是单纯的 API 服务,前端在 Web ...
- scrapy setting 备注
scrapy 脚本里面设置输出文件: process = CrawlerProcess(settings) process.settings.set('FEED_URI', 'wangyi.csv', ...
- Oracle用户权限分配
一.权限分类 系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的). 二.系统权限管理 1.系统权限分类: ...
- 医院his系统数据库恢复
医院IT系统的重要性堪比金融行业,“银行系统宕机,老百姓不能取钱:医院HIS系统宕机,老百姓不能看病”, 医院信息系统称得上是迄今为止企业级信息系统中最复杂的一类. 某医院HIS系统SQL2008数 ...
- BZOJ2698染色
2698: 染色 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 223 Solved: 150[Submit][Status][Discuss] De ...