Iscroll4 实现 横竖左右滚动,滑动效果比拟andriod原生.
来源：互联网 发布：外贸搜客户软件 编辑：程序博客网 时间：2024/05/17 06:49
之前做了一个滚动效果,但是滚动时比较飘.
经过这几天仔细查找.总算有所收获.与大家一起分享.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}}
- Iscroll4 实现 横竖左右滚动,滑动效果比拟andriod原生.
- android 左右滑动效果实现
- Android实现左右滑动效果
- Android实现左右滑动效果
- android 实现左右滑动效果
- Android实现左右滑动效果
- Android实现左右滑动效果
- Android实现左右滑动效果
- Android实现左右滑动效果
- 原生js左右滑动
- 实现导航栏的左右滑动效果
- Android实现左右滑动指引效果
- Android实现导航菜单左右滑动效果
- Android实现导航菜单左右滑动效果
- Android实现导航菜单左右滑动效果
- Android实现左右滑动指引效果
- Android实现导航菜单左右滑动效果
- Android实现左右滑动指引效果
- FLV文件格式解析
- 深入学习Django源码基础3 - python提供的对象默认方法
- MP4文件格式解析 之 二 （Sample table atom ）
- Visual Studio opens the default browser instead of Internet Explorer
- POJ 1472 Coins （多重背包+滚动数组）
- Iscroll4 实现 横竖左右滚动,滑动效果比拟andriod原生.
- linux多线程
- &U盘装Win8消费者预览版只需两步骤&【系统收藏】
- 你看糊涂了吗？解析C中复杂的声明
- oracle常用函数总结
- sudo时不需要每次都输入root密码
- 如何在Windows下搭建Android开发环境
- listview baseadapter优化
- 字符串加密
