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

最新推荐文章于 2025-06-13 10:32:02 发布

原创最新推荐文章于 2025-06-13 10:32:02 发布 · 5.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web app #H5滚动选择器 #移动端选择器

构建项目专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一款适用于webApp的H5选择器picker.js及其使用方法，并通过两个实例展示了如何实现单列及三列日期联动选择器。此外，还介绍了百度团队研发的滑动组件iSlider。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

《我的博客地图》

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

1、开源H5选择器picker.js

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

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

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

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

第一步，绑定元素，选择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;/*滚动选择器的确定*/

}

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

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

第二步，编写JS代码

var $dateEle = $('#date');//选择DOM节点
var year = [],month = [],day = [];//定义年月日数组
var nowDate = new Date();
var nowYear = nowDate.getFullYear();//获取当前年月日
var nowMonth = nowDate.getMonth() + 1;
var startYear = 1990,nowDay = null;
for(let i=startYear,j=1,k=nowYear;i<=k;i++,j++){//初始化 年 数据
    var temp = new Object();
    temp.text = i + ' 年';
    temp.value = j;
    year.push(temp);
}
for(let i=1,j=1;i<13;i++,j++){//初始化 月 数据
    var temp = new Object();
    temp.text = i + ' 月';
    temp.value = j;
    month.push(temp);
}
if(nowMonth == 2){//不同月份，具体的天数的处理
    nowDay= ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 ==0) ? 29 : 28;//闰年29天，平年28天
}else if(nowMonth==1 || nowMonth==3 || nowMonth==5 || nowMonth==7 || nowMonth==8 || nowMonth==10 || nowMonth==12){
    nowDay= 31;//月份为：1,3,5,7,8,10,12 时，大月.天数为31
}else{
    nowDay= 30;//其他月份，小月，天数为30.
}
for(let i=1,j=1;i<nowDay+1;i++,j++){//初始化 日 数据
    var temp = new Object();
    temp.text = i + ' 日';
    temp.value = j;
    day.push(temp);
}
var selectedIndex = [year.length-1, nowDate.getMonth(), nowDate.getDate()-1]; /* 年月日默认选中的值 */
var datePicker = new Picker({//创建并初始化选择器对象
    data: [year,month,day],
    selectedIndex: selectedIndex,
    title: '选择日期'
});
$dateEle.on('click', function () {
    datePicker.show();//绑定触发选择器事件
});
var changeDate = {year:'',month:'',day:''}//定义选择器已选的年月日
datePicker.on('picker.change', function (index, selectedIndex){//监听每列发生滚动的的事件
    changeDate.year = startYear + year.length-1;
    if(index == 0){
        changeDate.year = startYear + selectedIndex
    }
    if(index == 1){
        changeDate.month = selectedIndex+1;
        if(changeDate.month == 2){
            changeDate.day= ((changeDate.year % 4 == 0 && changeDate.year % 100 != 0) || changeDate.year % 400 ==0) ? 29 : 28;//闰年29天，还是平年
        }else if(changeDate.month==1 || changeDate.month==3 || changeDate.month==5 || changeDate.month==7 || changeDate.month==8 || changeDate.month==10 || changeDate.month==12){
            changeDate.day= 31;//月份为：1,3,5,7,8,10,12 时，大月.天数为31
        }else{
            changeDate.day= 30;//其他月份，小月，天数为30.
        }
        day = [];
        for(let i=1,j=1;i<=changeDate.day;i++,j++){
            var temp = new Object();
            temp.text = i + ' 日';
            temp.value = j;
            day.push(temp);
        }
        datePicker.refillColumn(2, day);//动态更新不同月份对应的不同总天数
    }
});
datePicker.on('picker.valuechange', function (selectedVal, selectedIndex) {//确定按钮的回调
    selectedVal[0] = startYear + selectedVal[0] - 1;//selectedVal [2015, 2, 28]
    $dateEle.children('.value').text(selectedVal[0]+'年'+selectedVal[1]+'月'+selectedVal[2]+'日').css('color','#333');
});

第三步，样式重置，同上

2、滑动组件iSlider

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