webApp滚动选择器-实践与应用

Myth丶恋晨 2022-06-12 10:29 178阅读 0赞

*最近更新时间：2017年7月21日15:05:35*

[《我的博客地图》][Link 1]

前端开发不仅追求界面的华丽，而且要适应和熟悉用户的交互方式，目前webApp界面中的选择器大多数采用的方案是，底部弹出滚动选择器，用户可以进行自如的选择，交互性非常好。

1、开源H5选择器picker.js

源码下载、使用、学习请查看[GitHub地址][GitHub]，下载zip包请[点击][Link 2] ，[知乎][Link 3]专栏讲解。

介绍：pickerjs选择器适用于webApp中的选择器，包括单列选择器，两列选择器，三列选择器，变化选择器，二级联动选择器，三级联动选择器。

使用方法：npm方式和静态资源载入方式，第二种方式简单易行，只需在页面head标签中载入压缩后的js文件

案例一：单列选择器，如下图所示

![20170721153152864][]

第一步，绑定元素，选择DOM元素

第二步，编写JS代码

productPicker.on('picker.select', function (selectedVal, selectedIndex) \{ //监听用户滚动选择器的事件  
    console.log(selectedVal);//每次滚动选择器，都会触发这个事件；具体文本内容

console.log(selectedIndex);//具体文本索引号  
\});

第三步，样式重置

.picker .picker-panel\{

height: auto;/\*总高度\*/  
\}

.picker .picker-panel .picker-choose\{

height: auto;/\*标题高度\*/

padding: 0 1rem;

.picker .picker-panel .picker-content .mask-top\{

height: 5rem;/\*内容区域上蒙层高度\*/

.picker .picker-panel .picker-content .mask-bottom\{

height: 5rem;/\*内容区域下蒙层高度\*/

.picker .picker-panel .wheel-wrapper .wheel\{

height: 15rem;/\*内容区域内容总高度\*/

.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll\{

margin-top: 5rem;/\*内容滚动区域\*/

.picker .picker-panel .wheel-wrapper .wheel .wheel-scroll .wheel-item\{

font-size: 1.5rem;/\*滚动区域列表ul>li\*/

line-height: 5rem;

height: auto;

.picker .picker-panel .picker-choose .picker-title\{

font-size: 1.5rem;/\*滚动选择器title\*/

line-height: 4rem;

.picker .picker-panel .picker-choose span\{

font-size: 1.5rem;/\*滚动选择器的 确定 和 取消\*/

line-height: 4rem;

padding:0!important;

top:0!important;

position: relative!important;

.picker .picker-panel .picker-choose .cancel\{

float: left;/\*滚动选择器的 取消\*/

.picker .picker-panel .picker-choose .confirm\{

float: right;/\*滚动选择器的 确定\*/

案例二：三列日期联动选择器，如下图所示

![20170721155428744][]

第一步，绑定元素，选择DOM元素

第二步，编写JS代码

第三步，样式重置，同上

2、滑动组件iSlider

学习和使用请查看 [GitHub地址][GitHub 1] 进行系统学习，也可查看 [中文文档][Link 4] ，这个组件是由 [百度企业产品前端团队][Link 5] 研发。

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[GitHub]: https://github.com/ustbhuangyi/picker
[Link 2]: https://github.com/ustbhuangyi/picker/zipball/master
[Link 3]: https://zhuanlan.zhihu.com/p/22006728
[20170721153152864]: /images/20220612/a169dc2222f347ab9aa58a1c7647e899.png
[20170721155428744]: /images/20220612/2f5f8811631548fb9217750c68fc735e.png
[GitHub 1]: https://github.com/BE-FE/iSlider
[Link 4]: https://be-fe.github.io/iSlider/demo/index_chinese.html
[Link 5]: https://github.com/be-fe