H5 移动端时间选择器

最新推荐文章于 2024-08-09 07:00:39 发布

小三金

最新推荐文章于 2024-08-09 07:00:39 发布

阅读量1w

点赞数 3

分类专栏： CSS javascript

本文链接：https://blog.csdn.net/tdjqqq/article/details/52370712

版权

javascript 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

本选择器，自己填充内容（li的文本），只是做了一个大概的样式，其它的有需要者自己去改

<html>

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript" src="zepto.js"></script>

<style type="text/css">
.pic{
margin: auto;
position: absolute;
top: 0; bottom: 0; right: 0;
}

.date_picker{
width:90%;
margin:0 auto;
border:1px solid #ccc;
min-height:245px;
background:#jjj;
position:relative;
}

.date_picker_title{
width:100%;
height:80px;
line-height:80px;
border-bottom:1px solid #ccc;
text-align:center;
margin-bottom:5px;
}

ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
width:100%;
height:60px;
line-height:60px;
border-bottom:1px solid #ccc;
text-align:center;
}
.date_picker .on{
background:#aaa;
}

#date_list{
height:183px;
overflow:auto;
}

</style>
</head>

<body>
<div class="filter">

</div>

<div class="date_picker" >
<div class="date_picker_title" >时间选择器</div>
<div id="date_list">
<ul>
<li></li>

<li class="on">8-30</li>
<li>9-1</li>
<li>9-2</li>
<li>9-3</li>
<li>9-4</li>
<li>9-5</li>
<li>9-6</li>
<li></li>

</ul>
</div>

</div>

</body>
</html>
<script>
window.οnlοad=function(){
var myScroll;
var liHeight=$("#date_list ul li").height();
var currentLI=0;
var a=0;
function loaded () {
myScroll = new IScroll('#date_list', { mouseWheel: true });

myScroll.on('scrollStart', function () {
$("#date_list ul li").removeClass("on");

});

myScroll.on('scrollEnd', function () {
//alert("scroll end!!")
a=Math.round(Math.abs(this.y)/liHeight)+1

$("#date_list ul li").eq(a).addClass("on");

console.log("a=", a);
currentLI= parseInt(((this.y*-1)-(61*2))/liHeight)+1;
console.log("currentLI="+currentLI);

myScroll.scrollTo(0, -1*(a-1)*61, IScroll.utils.ease.elastic);

console.log($("#date_list ul li[class='on']").html())

if ( this.x < -1000 ) {
// do something

}
});

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

loaded();

}

</script>