jquery模拟picker滑动选择效果

Dear 丶 2023-01-13 15:52 193阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title></title>
    		<style type="text/css">
    			html,body{
    				width: 100%;
    				height: 100%;
    			}
    			div{
    				box-sizing: border-box;
    			}
    			.flex{
    				display: flex;
    			}
    			.billing_cent {
    				width: 100%;height: 100%;
    				position: fixed;
    				left: 0;
    				top: 0;
    				z-index: 10;
    				background-color: #000000;
    			}
    			.billing_cent_data {
    				width: 100%;
    				height: 100%;
    				justify-content: center;
    				align-items: center;
    			}
    			
    			.billing_select {
    				width: 230px;
    				height: 257px;
    				background: #FFFFFF;
    				position: relative;
    				border-radius: 3px;
    			}
    			
    			.billing_select_top>div {
    				text-align: center;
    				font-size: 16px;
    				color: #333333;
    				padding: 20px 0;
    			}
    			
    			.billing_select_top>img {
    				width: 7px;
    				height: 13px;
    				position: absolute;
    				right: 10px;
    				top: 10px;
    				z-index: 3;cursor: pointer;
    			}
    			
    			.billing_select_center {
    				width: 100%;
    				height: 141px;
    				padding: 0 20px;
    				overflow: hidden;
    				position: relative;
    			}
    			
    			.billing_select_bot {
    				width: 100%;
    				text-align: center;
    				height: 45px;
    				line-height: 45px;
    				background: #EEEEEE;
    				text-align: center;
    				position: absolute;
    				left: 0;
    				bottom: 0;
    				z-index: 3;
    				border-radius: 3px;
    			}
    			
    			.billing_select_center>ul {
    				margin: 0 auto;
    				display: block;
    				box-sizing: border-box;
    				width: 100%;
    				height: 100%;
    				overflow: auto;
    				padding: 47px 0;
    				position: absolute;
    				left: 0;
    				top: 0;
    				z-index: 3;
    			}
    			
    			.billing_select_center>ul>li {
    				width: 100%;
    				height: 47px;
    				line-height: 47px;
    				font-size: 15px;
    				color: #333333;
    				text-align: center;
    				opacity: .5;
    			}
    			
    			.billing_select_border {
    				width: calc(100% - 40px);
    				left: 20px;
    				height: 1px;
    				position: absolute;
    				top: 47px;
    				background-color: #F2F2F2;
    			}
    			.billing_opacity{
    				opacity: 1 !important;
    			}
    			
    			.billing_select_border2 {
    				width: calc(100% - 40px);
    				left: 20px;
    				height: 1px;
    				position: absolute;
    				top: 94px;
    				background-color: #F2F2F2;
    			}
    
    		</style>
    	</head>
    	<body>
    		
    			<div class="billing_cent">
    					<div class="billing_cent_data flex">
    						<div class="billing_select">
    							<div class="billing_select_top">
    								<div>请选择发票内容</div>
    								<img src="img/icon36.png" alt="..." />
    							</div>
    							<div class="billing_select_center">
    								<ul>
    									<li class="billing_opacity">
    										饮料
    									</li>
    									<li>
    										酒水
    									</li>
    									<li>
    										王老吉
    									</li>
    									<li>
    										老白干
    									</li>
    									<li>
    										营养快线
    									</li>
    									<li>
    										脉动
    									</li>
    								</ul>
    								<div class="billing_select_border"></div>
    								<div class="billing_select_border2"></div>
    							</div>
    							<div class="billing_select_bot">
    								确定
    							</div>
    						</div>
    					</div>
    				</div>
    		
    		<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			// 监听滚动事件
    							var scroll_index=0;//默认index
    							const $ScrollWrap = $(".billing_select_center>ul")
    							// 监听滚动停止
    							let t1 = 0;
    							let t2 = 0;
    							let timer = null; // 定时器
    							$ScrollWrap.on("touchstart", function() {
    								// 触摸开始 ≈ 滚动开始
    							})
    							$ScrollWrap.on("scroll", function() {
    								// 滚动
    								clearTimeout(timer)
    								timer = setTimeout(isScrollEnd, 100)
    								t1 = $ScrollWrap.scrollTop()
    							})
    			
    							function isScrollEnd() {
    								t2 = $ScrollWrap.scrollTop();
    								if (t2 == t1) {
    									// 滚动停止
    									clearTimeout(timer)
    									// 获取每个li距离顶部边框的距离
    									var leng = $(".billing_select_center>ul>li").length;
    									for (var k = 0; k < leng; k++) {
    										var top_leng = $(".billing_select_center>ul").children("li").eq(k).position().top;
    										// 区间在 30 ~ 60 之间则选中 这个区间范围是根据高度来决定的
    										if (top_leng >= 30 && top_leng <= 60) {
    											scroll_index=k;
    											$("li").removeClass("billing_opacity");
    											$(".billing_select_center>ul").children("li").eq(k).addClass("billing_opacity");
    									// 滚动到相应位置 每个li高度 47px
    									var scrool_heg = k * 47;
    									$(".billing_select_center>ul").scrollTop(scrool_heg);
    										}
    									}
    								}
    							}
    							
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221022/f9f40c8d9d1a44469fbabfd3aa105ef0.png