用js怎样做手机端触屏滚动选择效果啊

 我来答
匿名用户
2018-01-15
展开全部

先说下实现的思路:

1 页面布局,一堆等待滚动选择的列表 先实现一个竖排的列表,触屏能滚动,也就是说先不考虑选择的问题 写一个固定高度的盒子 把一堆待选择的列表放里面 触屏滚动大概就实现了 简单代码:

<div style="height:300px" id=“box”>

<li style="height:100px"></li>

<li style="height:100px"></li>

...

</div>

2: 滚动选择  第一步监控触屏滚动 onmousedown onmousemove onmouseup 监控鼠标触屏在box里的上下移动距离  也就是说滚动屏幕了多远  然后box scrollTop定位的减去移动的距离也就可以算出当前box距离顶部的距离 例如 mousemove -300px 原来的scrollTop为0 那现在0-(-300)=300px 那么每个li 100px 然后定位当前选中的 li标签 300/100 = 3 当前为选中了 列表中的第三个 

3 以上只是提供了一个简单的实现思路  下面是别人的案例你可以看下 大体上就是这种思路实现的

网页链接

哎呦互动
2024-07-12 广告
现场大屏幕互动软件产品开发欢迎咨询上海爱友信息科技有限公司,公司成立于2016年,是国内最早的一批H5软件开发商之一。公司经过多年的自主研发并不断迭代的互动产品“哎呦互动”,已经获得数十项软件著作权和多项软件专利,并积累了众多的品牌客户和无... 点击进入详情页
本回答由哎呦互动提供
9陈通9
2018-01-12 · TA获得超过122个赞
知道小有建树答主
回答量:133
采纳率:73%
帮助的人:48.6万
展开全部
只要有滚动条,手机端浏览器会自动适应滚动
追问
类似于苹果手机选择时间的那种
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式