仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）
事实上不太适合做上拉刷新和下拉加载
官方地址
http://idangero.us/swiper
demo
http://idangero.us/swiper/demos/#.V5YV4_mF4dU
API手册
http://idangero.us/swiper/api/
新手教学
http://idangero.us/swiper/get-started/#.V5YXKfmF4dU
脚手架
<!DOCTYPE html> <html lang="en"> <head> <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" /> </head> <body>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script></body> </html>
实战demo
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
</head>
<style type="text/css">
.swiper-container,
html, body {
position: relative;
height: 100%;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
font-size: 18px;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 轮播图 -->
<!-- <div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<div class="swiper-scrollbar"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script>
$(function() {
var isLoader = false;
var mySwiper = new Swiper('.swiper-container', {
/* 垂直方向 */
direction: 'vertical',
/* 每次滑动或者显示的数量 */
slidesPerView: 10,
/* 是否允许滑轮滚动 */
mousewheelControl: true,
/* 是否无限循环 */
loop: false,
/* 自由模式 */
freeMode: true,
/* 分页 */
// pagination: '.swiper-pagination',
/* 上一页按钮 */
// nextButton: '.swiper-button-next',
/* 下一页按钮 */
// prevButton: '.swiper-button-prev',
/* 滚动条 */
scrollbar: '.swiper-scrollbar',
// 滚动到顶部事件（页面加载时会触发）
onReachBeginning: function() {
console.log("Reach Begin");
},
// 滚动到顶部事件（页面加载时，如果数目太少会触发）
onReachEnd: function() {
mySwiper.slideTo(0, 1000, function(){console.log("done")});
if (isLoader == false) {
/* 加载中 */
mySwiper.appendSlide("<div class='swiper-slide'>数据加载中...</div>");
isLoader = true; /*暂时加锁，等数据加载完成之后再解锁更改为false
}
}
})
})
</script>
</body>
</html>
仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）的更多相关文章
- Web程序员开发App系列 - 开发我的第一个App，源码下载
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- Web程序员开发App系列 - 认识HBuilder
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- Cordova入门系列（三）Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
- 转载：超级强大的vim配置(vimplus)--续集
超级强大的vim配置(vimplus)--续集 原文地址:https://www.cnblogs.com/highway-9/p/5984285.html An automatic configura ...
- Web程序员开发App系列 - 调试Android和IOS手机代码（补图）
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- Web程序员开发App系列 - 申请苹果开发者账号
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- cVim—Chrome上更强大的vim插件
cVim——Chrome上更强大的vim插件 介绍 也许很多人在chrome上都用过类似Vimium, ViChrome的插件,这些插件的目的都差不多,就是在浏览器中提供一些类似vim的操作来提高效率 ...
- iOS高仿app源码：纯代码打造高仿优质《内涵段子》
iOS高仿app源码:纯代码打造高仿优质<内涵段子>收藏下来 字数1950 阅读4999 评论173 喜欢133 Github 地址 https://github.com/Charlesy ...
- js 模板引擎 - 超级强大
本来没想写这篇文章,但是网上误导大众的文章太多了,所以今天就抽出半小时时间谈一下我对前端模板引擎的感受吧. 前端模板引擎相信大家都再熟悉不过了,市面上非常多的号称最好.最快.最牛逼的,随便就能找到一大 ...
随机推荐
- 如何提高cocos2d-x-spine骨骼动画加载速度
下面分2点来说: 1. 时间消耗点:io和现场解析 解决方案:加载过的骨骼动画就不要每次重新加载,不要每次都去加载json文件和atlas,我推荐使用 static CCSkeletonAnimati ...
- CodeForces - 416A (判断大于小于等于 模拟题)
Guess a number! Time Limit: 1000MS Memory Limit: 262144KB 64bit IO Format: %I64d & %I64u Sub ...
- Android之UI控件
本文主要包括以下内容 Spinner的使用 Gallery的使用 Spinner的使用 Spinner的实现过程是 1. 在xml文件中定义Spinner的控件 2. 在activity中获取Spin ...
- php 获取当前时间
<?php echo $showtime=date("Y-m-d H:i:s");?>
- oracle 10g 学习之数据进行增删改查、数据库事务、约束（8）
目标 通过本章学习,您将可以: l 使用 DML 语句 l 向表中插入数据 l 更新表中数据 l 从表中删除数据 l 控制事务 l 描述约束 l 创建和维护约束 数据控制语言 l ...
- C# 编程音量控制
public FrmVoice() { InitializeComponent(); } [DllImport("user32.dll", EntryPoint = "S ...
- MQ的通讯模式
1) 点对点通讯:点对点方式是最为传统和常见的通讯方式,它支持一对一.一对多.多对多.多对一等多种配置方式,支持树状.网状等多种拓扑结构. 2) 多点广播:MQ适用于不同类型的应用.其中重要的,也是正 ...
- 免费电子书：使用VS Online敏捷管理开源项目
今天推荐的是一本由微软出版社发布的免费电子书,涉及的话题是如何在Visual Studio Online中基于敏捷的思想来管理开源项目. 本书的几位作者(自称ALM领域的游侠),给大家分享了在一个敏捷 ...
- Java中如何使封装自己的类，建立并使用自己的类库？
转自:http://blog.csdn.net/luoweifu/article/details/7281494 随着自己的编程经历的积累会发现往往自己在一些项目中写的类在别的项目中也会有多次用到.你 ...
- Effective C++笔记：构造/析构/赋值运算
条款05:了解C++默默编写并调用哪些函数 默认构造函数.拷贝构造函数.拷贝赋值函数.析构函数构成了一个类的脊梁,只有良好的处理这些函数的定义才能保证类的设计良好性. 当我们没有人为的定义上面的几个函 ...