modabobo
- 浏览: 508586 次
-
文章分类
最新评论
Iscroll4 实现 横竖左右滚动,滑动效果比拟andriod原生.
之前做了一个滚动效果,但是滚动时比较飘.
经过这几天仔细查找.总算有所收获.与大家一起分享.webapp滚动的tabpannel效果以后都可以用这个了.
网上找了一个代码,经过了一些修改.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Wireless</title>
<link rel="stylesheet"type="text/css"href="base.css"/>
</head>
<script>
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
<body>
<input type="button" onClick="testInsertContent();" value="testInsertContent">
<div id="screen">
<header id="nav">
<ul>
<li>
<a class="active" href="javascript:" title="Post it" rel="0" onClick="goToPage(0)"><span class="icon ico-post"></span><span class="text">Post it</span></a>
</li>
<li>
<a href="javascript:" title="Calendar" rel="1" onClick="goToPage(1)"><span class="icon ico-calendar"></span><span class="text">Calendar</span></a>
</li>
<li>
<a href="javascript:" title="Address" rel="2" onClick="goToPage(2)"><span class="icon ico-address"></span><span class="text">Address</span></a>
</li>
<li>
<a href="javascript:" title="Map" rel="3" onClick="goToPage(3)"><span class="icon ico-map"></span><span class="text">Map</span></a>
</li>
</ul>
</header>
<div id="pagewrapper">
<div id="pageflip">
<div class="scrollerwrapper">
<div class="scroller" id=temp1>
可以每个上下滚动设置id 填充不同的内容<br/>
此处 scroller 里的内容都可以随意替换 但scroller 必须保留.iscroll滚动默认滚动为wrapper下的第一个结点
</div>
</div>
<div class="scrollerwrapper">
<div class="scroller">
<ul>
<li>
此处 scroller 里的内容都可以随意替换 但scroller 必须保留.iscroll滚动默认滚动为wrapper下的第一个结点
</li>
<li>
Contact Name2
</li>
<li>
Contact Name2
</li>
<li>
Contact Name2
</li>
<li>
Contact Name2
</li>
</ul>
</div>
</div>
<div class="scrollerwrapper">
<div class="scroller">
<ul>
<li>
Contact Name3
</li>
<li>
Contact Name3
</li>
<li>
Contact Name3
</li>
<li>
Contact Name3
</li>
<li>
Contact Name3
</li>
</ul>
</div>
</div>
<div class="scrollerwrapper">
<div class="scroller">
<ul>
<li>
Contact Name4
</li>
<li>
Contact Name4
</li>
<li>
Contact Name4
</li>
<li>
Contact Name4
</li>
<li>
Contact Name4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="iscroll.js?v=4.0"></script>
<script src="jquery.js" ></script>
<script>
function testInsertContent(){
//简单的测试 按钮
//填充数据,刷新scroll.
//再看刷新后的滚动情况
var a=$("#temp1").html();
$("#temp1").html("33333333333333333333333333333Contact Name1 <br/> Contact Name1 <br/><br/>"+a+"<br>aaa");
//刷新上下滚动.左右滚动
vertical_scroll[0].refresh();
page_flip.refresh();
}
//v基本参数定义
var page_flip, vertical_scroll = [], pages, t, p, iDevice = (/iphone|ipad/gi).test(navigator.appVersion), $id = function(id){
return document.getElementById(id);
}, $sa = function(s){
return document.querySelectorAll(s);
}, $s = function(s){
return document.querySelector(s);
}, initScroll = function(){//初始化iscroll
if (window.scrollY != 1) {
t = setTimeout(initScroll, 100);
}
else {
clearTimeout(t);
t = null;
//获取上下滚动的iscroll
pages = $sa('.scrollerwrapper');
//设置左右滚动的iscroll
page_flip = new iScroll('pagewrapper', {
bounce: false,
hScrollbar: false,
vScrollbar: false,
snap: true,//此处必须为true
momentum: false,
lockDirection: true,
fixedScrollbar: false,//只有按住屏幕的时候才能显示出滚动条
onScrollEnd: function(){
//此处利用this.currPagex 获取当前是在第几屏 . 从0开始:0,1,2,3,4.....
//active为处于当前某个栏目时导航的样式.
$s('#nav a.active').className = '';
$s('#nav li:nth-child(' + (this.currPageX + 1) + ') a').className = 'active';
}
});
//此处的获取size函数不能缺少.除非你自定义css.
setSize();
for (var a = 0; a < pages.length; a++) {
//利用数组来定义出上下滚动的iscroll
vertical_scroll[a] = new iScroll(pages[a], {
bounce: false,
hScrollbar: false,
vScrollbar: true,
fixedScrollbar: false,
lockDirection: true,
fadeScrollbar: true,
hideScrollbar: true
});
}
//此段其实可以去掉，是侦听手机屏幕旋转的，一般webpp应该都是固定屏幕的。
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function(){
setSize();
setTimeout(function(){
var a = page_flip.currPageX;
page_flip.scrollToPage(a, 0, 0)
}, 400);
}, false);
//监听导航栏的点击事件，这里我是去掉的，直接在导航那里加onclick函数，因为有时内页面内容过多或有问题。
//delegate('nav', 'touchstart', goToPage);
//禁止其他页面脚本 此段我也去掉了。我在页面头部就直接加了禁止脚本。
//document.addEventListener('touchmove', stopDefault, false);
}
}, setSize = function(){//重新计算宽度
if (window.scrollY != 1) {
window.scrollTo(0, 1);
p = setTimeout(setSize, 100);
}
else {
//清除
clearTimeout(p);
p = null;
//vsrollH 为屏幕高度- 头部高度，即为滚动区域高度
var vscrollH = window.innerHeight - $id('nav').offsetHeight;
if (iDevice) {
//高度设置。其实完全可以在css里设置height：100%。
$id('pagewrapper').style.height = vscrollH + 'px';
}
var e = $id('pagewrapper'), a = $id('pageflip'), b = e.offsetWidth;
//这里的4可以随便替换成你所要
//几个左右滚动页这里为几。
//宽度设置
//同样可以在css里设置
a.style.width = b * 4 + 'px';
for (var c = 0; c < pages.length; c++) {
pages[c].style.width = b + 'px';
if (vertical_scroll[c]) {
//设置上下滚动的每个iscroll的高度
pages[c].style.height = vscrollH + 'px';
vertical_scroll[c].refresh();
}
}
page_flip.refresh();
}
}, loaded = function(){//初始化load事件
window.scrollTo(0, 1);
t = setTimeout(initScroll, 100);
window.removeEventListener('load', loaded, false);
}, stopDefault = function(e){
e.preventDefault()
}, delegate = function(obj, fun, callback){
var parent = $id(obj);
parent.addEventListener(fun, callback, false);
}, goToPage = function(n){
//try {
// var a = e.target;
//if (a.nodeName.toLowerCase() === 'a' || a.nodeName.toLowerCase() === 'span') {
//var n = a.nodeName.toLowerCase() === 'a' ? +a.getAttribute('rel') : +a.parentNode.getAttribute('rel');
//stopDefault(e);
//因为我是在nav里加了onclick函数，所以只保留此段即可。
//可以加入try catch 避免page_flip没有加载完成
page_flip.scrollToPage(n, 0, 400);
// }
//}
//catch (e) {
// console.log(e);
//}
}, init = function(){
window.addEventListener('DOMContentLoaded', loaded, false);
}
//return {
// start: function(){
// init();
// }
// }
//, wa = new WebApp();
// wa.start();
init();
</script>
</body>
</html>
base.css
html, body {
height: 100%
}
body, ul, li, header {
padding: 0;
margin: 0;
border: 0
}
body {
font-size: 12px;
-webkit-text-size-adjust: none;
font-family: Helvetica, Arial, Verdana, sans-serif;
background-color: #666;
}
#screen {
height: 1000px;
}
#nav ul{
display: -webkit-box;
display: box;
}
#nav li {
-webkit-box-flex : 1;
box-flex : 1;
width:25%;
list-style: none;
border-bottom: 4px solid #7C7D7C
}
.icon {
display: inline-block;
width: 32px;
height: 88px;
background-image: url(icon.png);
background-repeat: no-repeat
}
.ico-post {
background-position: 0 center
}
.ico-calendar {
background-position: -32px center
}
.ico-address {
background-position: -64px center
}
.ico-map {
background-position: -96px center
}
.text {
display: inline-block;
height: 88px;
line-height: 88px;
vertical-align: top;
padding-left: 5px
}
#nav a {
display: block;
height: 88px;
border-right: 1px solid #202020;
border-left: 1px solid #353535;
font: bold 14px Helvetica, Arial, Verdana, sans-serif;
color: #7B7B7B;
text-shadow: 0px 0px 4px #333;
text-align: center;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#323232),to(#242424))
}
#nav a.active {
color: #FFF;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#989998),to(#7C7D7C))
}
#pagewrapper {
position: absolute;
z-index: 1;
top: 92px;
bottom: 0;
width: 100%;
background: #aaa;
overflow: hidden
}
#pageflip {
height: 100%
}
.scrollerwrapper {
position: relative;
z-index: 2;
float: left;
height: 100%;
font-size: 2em;
background: #fff;
overflow: hidden
}
.scrollerwrapper ul {
background-color: #666
}
.scrollerwrapper li {
list-style: none;
height: 96px;
line-height: 96px;
text-indent: 35px;
color: #FFF;
border-bottom: 1px solid #353535;
background-color: #090909
}
@media all and (max-width:480px) and (orientation:portrait){
.icon{
display:block;
width:32px;
height:60px;
margin:0 auto
}
.ico-post{
background-position:0 20px
}
.ico-calendar{
background-position:-32px 20px
}
.ico-address{
background-position:-64px 20px
}
.ico-map{
background-position:-96px 20px
}
.text{
display:inline;
width:auto;
height:auto;
line-height:normal;
vertical-align:middle
}
#nav a{
height:90px;
line-height:normal
}
#pagewrapper{
top:94px
}
}
@media all and (max-width:960px) and (orientation:landscape){
.icon{
height:52px
}
.text{
display:inline;
width:auto;
height:auto;
line-height:inherit
}
#nav a{
height:52px;
line-height:52px
}
#pagewrapper{
top:56px
}
}
分享到：
发表评论
相关推荐
flipsnap实现同一页面多个列表切换，使用iscroll实现列表内数据上下滑动及滑动刷新、加载更多
jQuery上下滑动加载刷新插件iscroll.js
jquery-iscroll.js鼠标控制ul左右滑动
iscroll5 滑动 滚动 最新资讯
原生 iscroll-4
iscroll4
使用Iscroll5.1.3 封装实现移动端页面的上拉,下拉刷新页面,ajax加载下一页
html5页面支持上拉刷新下拉加载更多数据的实现，关于实现可以看看这篇文章：https://blog.csdn.net/u012962759/article/details/85329854
【iScroll源码学习03】iScroll事件机制与滚动条的实现.pdf
iScroll.js的用法 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用） 提供了一种本地化的方式来对一...
在iphone、ipod、android 提供一种原生的方式来支持在一个固定高度的容器内滚动内容。
iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE...
iscroll.js
按照zepto插件的形式编写的用于移动端的日期选择插件，参照了JQM提供的...使用iscroll插件来支持滑动。代码结构通俗易懂，方便编写zepto插件的初学者学习参考。在这里分享资源也只是抛砖引玉，希望能帮到需要的朋友！
iscroll.js下拉滚动刷新demo 新增 1：回到顶部效果； 2：底部悬浮显示当前页数与总页(例1/5)；
相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效； 一、html代码,当然可以动态添加下面的小圆点 <li><strong>1....
动态滚动加载数据 页面滚动分页---iScroll实例：下拉刷新，滚动翻页
iscroll移动app滚动分页demo，上拉刷新，下拉加载更多。
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家...