Swipe 移动端滑动插件使用详解
简介
Swipe 是一个轻量级的移动滑动组件,这点从文件大小不难看出。它支持 1:1 的触摸移动,阻力以及防滑。单纯从移动端来使用,应该满足基本的需求了。
说明
从github下载后,可以发现,总共就8个文件,其中可能真正项目中用得到的,也基本就是1个 swipe.js 文件。
index.html 和 style.css 本身是作为演示存在的,有兴趣的可以研究一下。
那么我们具体如果使用它呢?很简单,基本只要如下代码即可:
以上代码运行结果:
通过鼠标点击或者放到手机上手指滑动,就可以看见幻灯片的运行效果了。当然,当前只是最基本的,全部都是默认配置。我们完全可以通过下面提供的参数,结合自己的需求,自义定出更好的效果来。
下面就是官方给的演示例子:
从中我们不难看出具体参数的使用方法和位置。这一个如果感兴趣,可以根据需要,自己加入参数试试,都是以json对象存在于Swipe的第二个参数的。
那么除了以上参数,Swipe还提供了一些常用的方法(API):
都是一些简单的接口方法,你可以Js调用他们以达到你想要的效果。
地址
https://github.com/thebird/sw…
Swipe 移动端滑动插件使用详解相关推荐
- html5 swipe滑动选择身高,Swipe 移动端滑动插件使用详解
前言 最近需要开发一个新的"微信活动平台",手机端主页需要用到一个幻灯片.因为好一段时间没有全部手写移动端页面了,遂又重新找了一个下有没有什么好的幻灯片插件,毕竟重复造轮子没有必要 ...
- android 脚本swipe,移动端滑动插件Swipe教程
前言 最近需要开发一个新的"微信活动平台",手机端主页需要用到一个幻灯片.因为好一段时间没有全部手写移动端页面了,遂又重新找了一个下有没有什么好的幻灯片插件,毕竟重复造轮子没有必要 ...
- ueditor上传组件显示乱码_最全面的移动端 UI组件设计详解:中篇
上一期给大家讲解了<最全面的移动端UI组件设计详解:上篇>,主要分享了:布局组件和导航组件2个部分:这次给大家带来:基础组件.表单组件和反馈组件详解,希望你在设计APP.小程序.H5页面中 ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:fullPage教程 -- 整屏滚动效果插件 fullpage详解 1. ...
- 导出jar插件_Fluttify输出的Flutter插件工程详解
系列文章: yohom:Fluttify输出的Flutter插件工程详解zhuanlan.zhihu.com yohom:开发Flutter插件必备原生SDK->Dart接口生成引擎`Flut ...
- [logstash-input-log4j]插件使用详解
Log4j插件可以通过log4j.jar获取Java日志,搭配Log4j的SocketAppender和SocketHubAppender使用,常用于简单的集群日志汇总. 最小化的配置 input { ...
- js截取图片 裁剪图片之cropper.js插件用法详解
js截取图片 裁剪图片之cropper.js插件用法详解 源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
- fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
- Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示,Agent端服务部署过程详解
Sonic 开源移动端云真机测试平台 - Agent端服务部署与安卓设备接入演示 一加8手机连接效果图展示 第一章:环境准备 ① agent-sources 资源包下载 ② Android SDK安装 ...
- logstash过滤器插件filter详解及实例
原创作者:峰哥ge 原创地址: https://www.cnblogs.com/FengGeBlog/p/10305318.html logstash过滤器插件filter grok正则捕获 grok ...
最新文章
- websocketpp 打印发送数据
- CTF-web-xff,referer 知识点;
- jQuery——给元素添加父级的方法
- python小学生课本剧_二年级上学期课本剧
- linux系统运行iso,linux可以加载iso镜像文件到启动项吗
- ++递归 字符串全排列_超全递归技巧整理,这次一起拿下递归
- 飞思卡尔单片机c语言编程详解,飞思卡尔单片机PIT汇编编程(一)
- crt怎么退出编辑模式_securecrt怎么退出当前指令
- NEYC 2017 游记
- Elasticsearch 版本 和SpringData ElasticSearch 版本以及SpringBoot版本选择
- 基于SpringBoot点餐小程序的开发【前后端】
- 【音视频流媒体】WebRTC 直播超详细介绍
- Java后端与Vue前端导出Excel表格文件并解决乱码和文件打不开
- AOT(超前编译)实例分析
- EtherCAT学习笔记:EEPROM存储内容结构(从站配置信息接口SII)
- 清华学堂东侧木质结构焚毁心痛不已
- 记录一个使用MD5加密密码的小工具类
- oracle 创建工作日表,oracle下sql创建指定年份全年日期表(区分工作日)
- 有小孩上学实用 高中课程同步学 v1.0.5 免登陆高级版
- 地震袭来,我们正在拍结婚照
热门文章
- vue常用之“定义全局变量constants”
- ‘click‘ handler took 3858s如何解决
- 介词 inside like near of off past around
- css/js解决 页面多次点击时出现部分蓝色
- html的excel表格自动换行,Excel单元格内换行实现同时设置多单元格自动换、避免输入短横线...
- IE浏览器无法打开HTTPS解决办法
- CryEngine架构概览
- CVPR 2021 | 目标引导的人类注意力估计提升零样本学习
- python使用神器_python 神器
- 无线路由器dhcp服务器连接失败,TP-Link路由器桥接提示“获取IP地址失败,请检查DHCP是否开启”怎么办...