JS触摸屏网页版仿App弹窗型滚动列表选择器

背景与需求分析

在移动端网页应用中，传统下拉列表的交互体验往往不尽如人意。优秀的交互设计通常避免直接使用原生下拉框，而是采用类似App原生应用的弹窗列表选择模式。网页版应用为了提升用户体验，也应遵循这一趋势。在近期的网页App开发中，笔者遇到了包括日期选择器、数据列表及变量列表在内的多种下拉选择需求。经过搜索，发现mobiscroll是一款较为优秀的解决方案，但其下载流程繁琐。令人意外的是，jquery.mobile和jeasyui.mobile等主流框架并未提供此类控件。尽管前端并非笔者唯一专长，但经过一夜的尝试与多种方案的测试，最终找到了一种近乎完美的实现方法。随后在使用过程中不断优化，现将其公开分享，供广大开发者参考使用。

首先展示该控件的实际运行效果。

控件特性与实现原理

该控件的滚动机制基于Div原生滚动方法，因此在触摸屏设备上能够呈现惯性滚动效果，同时兼容鼠标操作（尽管鼠标模式下未实现惯性特效）。鉴于该控件主要面向触摸屏场景，确保触屏体验完美即可，故未专门优化鼠标版特效。此控件已封装为jQuery插件，具备无边框、宽度100%的特点，使用便捷。例如，将其嵌入弹窗后，即可呈现上述效果图所示的交互样式。

具体的代码调用方法如下所示。

$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value);
}
});

以下是结合弹窗使用的完整代码示例，运行效果与上图一致：

<!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'设置数值'">
<div id="scrollbox"></div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">确 定</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//对象型数据
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "数据" + i;
data.push(m);
}
$("#dialog").dialog();
// Link to open the dialog
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//重新赋值
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

此外，还可以采用以下方式进行调用：

//字符串数据
var data1 = [];
for (var i = 0; i < 100; i++) {
data1.push(i);
}
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
spaceRows: 2,
value: '4',
data: data1,
onSelected: function (index, value) {
$("#Text1").val(value);
}
});
$("#dialog-link1").click(function (event) {
$("#dialog").dialog("open").dialog('center');
event.preventDefault();
});

若希望增加三维视觉效果，只需直接添加相应的CSS样式即可实现。

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc); /*Opera 11.10+*/
}
#cover_bottom_EasyScrollBox{
background: -ms-linear-gradient(top, #ccc, #000000); /* IE 10 */
background:-moz-linear-gradient(top,#ccc,#0000ff);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000); /*Opera 11.10+*/
}

以上介绍了基于JS开发的触摸屏网页版仿App弹窗型滚动列表及日期选择器的实现方法，希望能为开发者提供帮助。如有任何疑问，欢迎留言交流，笔者将及时回复。同时也感谢大家对该网站的支持！