`

html5在android搭建滚动条

阅读更多
最近的项目中出现类似IOS滚动条的效果。我们知道在html 中本来是有一个overflow的属性是可以设置出现滚动条的。但是在phonegap中就失去了效果!这个解决起来是要很多的东西,但是实现还是很简单的,只需要两个文件及少许的代码。
先是:html .................................................

<!DOCTYPE HTML>
<html class="ui_mobile">
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>好食物</title>
      <link rel="stylesheet" href="css/haoshiwu.css" type="text/css" media="screen" title="no title">
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script type="text/javascript" src="js/iscroll_jquery_wrapper.js"></script>
    <script type="text/javascript" src="js/haoshiwu.js"></script>
    <script type="text/javascript">
   var myScroll;
    function loaded() {
    	myScroll = new iScroll('wrapper');
    }
    document.addEventListener('DOMContentLoaded', loaded, false); 
     
     /*  var myScroll;
     function loaded() {
     	setTimeout(function () {
     		myScroll = new iScroll('wrapper');
     	}, 100);
     }
     window.addEventListener('load', loaded, false);  */
    </script>
  </head>
 <body>
 <div class="head_div">
 <div class = "logo_div">&nbsp;</div>
 <div class="sogo_div">
 <form action="" name="soso" method="post" >
 <input class="sogo_div_input" type="text" style="color: rgb(204, 204, 204);" value="搜索你感兴趣的.." name="sosokey"></input>
 <input id="sbkey" class="sbkey" type="submit" style="cursor:pointer;" value=" " name="sbkey">
 </form>
 </div>
 </div>
 
 <div id="wrapper">
	 <div class="list_div" id = "scroller">
		 <div class="sun_list_first" id="liangshiganhuo">
			  	<div class = "link_photo"></div>
			  	<div class="link_to_second">粮油干货</div>
			  	<div class = "link_count">44件</div>
			  	<div class="link_go"></div>
		 </div>
		  <div class="sun_list_middle" id="rouqinzhipin">
			  	<div class = "link_photo"></div>
			  	<div class="link_to_second">肉禽制品</div>
			  	<div class = "link_count">36件</div>
			  	<div class="link_go"></div>
		  </div>
		  <div class="sun_list_middle" id="ruzhipin">
		  		<div class = "link_photo"></div>
			  	<div class="link_to_second">乳制品</div>
			  	<div class = "link_count">20件</div>
			  	<div class="link_go"></div>
		  </div>
		  <div class="sun_list_middle" id="xiuxianshipin">
		  		<div class = "link_photo"></div>
			  	<div class="link_to_second">休闲食品</div>
			  	<div class = "link_count">31件</div>
			  	<div class="link_go"></div>
		   </div>
		  <div class="sun_list_middle" id="zibupin"> 
		  		<div class = "link_photo"></div>
			  	<div class="link_to_second">滋补品</div>
			  	<div class = "link_count">19件</div>
			  	<div class="link_go"></div>
		  </div>
		  <div class="sun_list_middle" id ="yinliao"> 
		  		<div class = "link_photo"></div>
			  	<div class="link_to_second">饮料</div>
			  	<div class = "link_count">39件</div>
			  	<div class="link_go"></div>
		  </div>
		  <div class="sun_list_middle" id="jiushuilei"> 
				<div class = "link_photo"></div>
			  	<div class="link_to_second">酒水类</div>
			  	<div class = "link_count">26件</div>
			  	<div class="link_go"></div>
		 </div>
		  <div class="sun_list_middle" id="shengxianshipin">		
		  		<div class = "link_photo"></div>
			  	<div class="link_to_second">生鲜食品</div>
			  	<div class = "link_count">49件</div>
			  	<div class="link_go"></div>
		  </div>
		 <div class="sun_list_last" id="yingyouershiping"> 
				<div class = "link_photo"></div>
			  	<div class="link_to_second">婴幼儿食品</div>
			  	<div class = "link_count">50件</div>
			  	<div class="link_go"></div>
		</div> 
	</div>
</div>
 
 <div class="menu_div">
	<div class="menu1" id="menu1">
		<div class="meun1_pic1"></div>
		<div class="meun1_text1">食品</div>
	</div>
	<div class="menu2" id = "menu2">
		<div class="meun2_pic1"></div>
		<div class="meun1_text1">话题</div>
	</div>
	<div class="menu2" id = "meun3">
		<div class="meun3_pic1"></div>
		<div class="meun1_text1">厂家</div>
	</div>
	<div class="menu2" id = "menu4">
		<div class="meun4_pic1"></div>
		<div class="meun1_text1">咨询</div>
	</div>
 </div>
</body>
</html>

[color=red]2.css文件。。。。。。。。。。。。。。。。。。。。。。。。。。。[/color][size=large][/size]
/* .ui-mobile, .ui-mobile .ui-page {
    min-height: 300px;
} */
  body {
    background:#ECEEF2 none repeat scroll 0 0;
    color:#666;
    font-family:Helvetica;
    font-size:72%;
    margin:0;
     line-height:1.5em;
  }
.head_div{
width:100%;
height:60px;
line-height: 60px;
background:#90A2B8;
border-bottom: 2px solid #7E858A;
}
.logo_div{
background: url("../img/haoshiwu_head-111.png") no-repeat scroll 0 0;
float:left;
margin-right: 10px;
width:120px;
margin-top: 0px;
}
.sogo_div{
float:left;
right:20px;
height: 52px;
line-height: 52px;
margin-top: 10px;
}
.sogo_div_input{
background: url("../img/ry_sosos.png") no-repeat scroll 0 0 transparent;
border: medium none;
    float: left;
    height: 38px;
    line-height: 38px;
    width: 100px;
    margin-right: 0px;
    margin: 5px 0 0 15px;
    padding-left: 5px;
}
.sbkey{
	margin-left:0px;
background: url("../img/ry_soso-111.png") no-repeat scroll 0 0 transparent;	
	 float: left;
    padding: 0;
    width: 50px;
    border: medium none;
    height: 38px;
    line-height: 38px;
    margin-top: 5px;
}
#wrapper {
    height: 333px; /* Of course you need to specify the object height */
    position: relative;
    /* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
    z-index: 1;
    /* it seems that recent webkit is less picky and works anyway. */
    width: 100%;
    background: #ECEEF2;
    overflow: hidden;
    margin-bottom: 0px;
}
 
#scroller {  
	-webkit-touch-callout:none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
 
     /* -webkit-box-shadow:0 0 8px #555;    /** Don't use box shadows, they slow down drastically CSS animations */
} 
.list_div{
   background: none no-repeat scroll 0 0 #ffffff;
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    float: left;
    margin: 20px;
    width: 88%;
 }
 
.list_div .sun_list_first{
	height:65px;
	border-bottom: 1px solid #C5CCD4;
	width:100%;
}
.list_div .sun_list_middle{
	height:65px;
	border-bottom: 1px solid #C5CCD4;
	border-top:1px solid #C5CCD4;
}
.list_div .sun_list_last{
	height:65px;
	border-top:1px solid #C5CCD4;
}
.link_to_second{
	height:60px;
	width:80px;		
	float:left;
	    line-height: 60px;
	    font-size: 16px;
	    font-stretch:narrower;
	    color:#000000;
}
 .link_photo{
	background: url("../img/food.png") no-repeat scroll 0 0 transparent;	
	height:50px;
	width:86px;
	 border: medium none;
	margin-left:0px;
	margin-right:10px;
	 margin-top: 5px;
	 border-radius: 6px 6px 6px 6px;
	 float:left;
}
.link_count{
font-size: 16px;
color:#222222;
height:60px;
width:40px;
line-height: 60px;
text-align: center;
float:left;
}
 .link_go{
background: url("../img/right.png") no-repeat scroll 0 0 transparent;	
	display: block;
    height: 30px;
   width:28px;
   float:left;
   position:absolute;
   right:1px;
    margin-top: 15px;
 }
.menu_div{
bottom:0px;
width:100%;
height:60px;
line-height:60px;
float:left;
font-size: 16px;
text-align: center;
background-color: #222222;
}
.menu_div .menu1{
	width:25%;
	height:60px;line-height:60px;
	background: #98989C no-repeat scroll 0 0 ;
	float: left;
	color: #ffffff;
	border-radius: 10px 10px 10px 10px;	
}

.meun1_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb1.png") no-repeat scroll 0 0 transparent;
}
.meun2_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb2.png") no-repeat scroll 0 0 transparent;
}
.meun3_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb3.png") no-repeat scroll 0 0 transparent;
}
.meun4_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb4.png") no-repeat scroll 0 0 transparent;
}
.meun1_text1{
height:20px;
width:34px;
line-height: 20px;
margin-left:25px;
}
.menu_div .menu2{
	background: #222222 no-repeat scroll 0 0 ;	
	width:25%;
	height: 60px;line-height:60px;
	float: left;
	color: #98989C;
	border-radius: 10px 10px 10px 10px;
}
   
[color=red] 3.随便做点js.................................[/color][size=large][/size]
$(document).ready(function(){
	/**
	 * 菜单的滑动
	 */
	$(".menu1,.menu2,.menu3,.menu4").hover
(function(){
	$(".menu1").css("background","#222222");
$(this).css("background","#98989C");
$(this).css("color","#ffffff");
},
function(){
$(this).css("background","#222222");
}); 
	
	/**
	 * 列表的点击跳转
	 */
$("#liangshiganhuo").click(function(){
	  window.location.href="shipin.html";
});
$("#rouqinzhipin").click(function(){
	 window.location.href="shipin.html";
});
$("#ruzhipin").click(function(){
	 window.location.href="shipin.html";
});
$("#xiuxianshipin").click(function(){
	 window.location.href="shipin.html";
});
$("#zibupin").click(function(){
	 window.location.href="shipin.html";
});
$("#yinliao").click(function(){
	 window.location.href="shipin.html";
});
$("#jiushuilei").click(function(){
	 window.location.href="shipin.html";
});
$("#shengxianshipin").click(function(){
	 window.location.href="shipin.html";
});
$("#yingyouershiping").click(function(){
	 window.location.href="shipin.html";
});

/**
 * 
 */
	
}); 

[color=red]把下面的 包塞到你的js 文件中那个就行了,如果对于搭建环境不熟悉的,我有篇文章也介绍了,希望对你有帮助。
ok,然后直接在Activity中使用super.loadUrl("file:///android_asset/www/haoshiwu.html");就完成了!

详细内容可以查看官网:http://cubiq.org/iscroll-4/comment-page-5#comments。
  • js.rar (68.7 KB)
  • 下载次数: 57
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics