webApp滚动选择器-实践与应用
来源:互联网 发布:淘宝买家最多买多少 编辑:程序博客网 时间:2024/06/05 08:19
最近更新时间:2017年7月21日15:05:35
前端开发不仅追求界面的华丽,而且要适应和熟悉用户的交互方式,目前webApp界面中的选择器大多数采用的方案是,底部弹出滚动选择器,用户可以进行自如的选择,交互性非常好。
1、开源H5选择器picker.js
源码下载、使用、学习请查看GitHub地址,下载zip包请点击 ,知乎专栏讲解。
介绍:pickerjs选择器适用于webApp中的选择器,包括单列选择器,两列选择器,三列选择器,变化选择器,二级联动选择器,三级联动选择器。
使用方法:npm方式和静态资源载入方式,第二种方式简单易行,只需在页面head标签中载入压缩后的js文件
<script type="text/javascript" src="../static/js/picker.min.js"></script>
案例一:单列选择器,如下图所示
第一步,绑定元素,选择DOM元素
<li id="product"><span class="key">贷款产品</span><span class="value">请选择</span><img class="choice" src="../static/images/right.png"></li>
第二步,编写JS代码
var $product = $('#product');//选择DOM节点
var data = [{text: 'E商贷',value: 1}, {text: '业主贷',value: 2}];//初始化单列选择器数据
var productPicker = new Picker({data: [data],title: '选择产品'});//创建并初始化选择器对象
$product.on('click', function () {productPicker.show();});//绑定触发选择器事件
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元素
<li id="date"><span class="key">注册时间</span><span class="value">请选择</span><img class="choice" src="../static/images/right.png"></li>
第二步,编写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地址 进行系统学习,也可查看 中文文档 ,这个组件是由 百度企业产品前端团队 研发。
- webApp滚动选择器-实践与应用
- 滚动选择器
- Python应用与实践
- PyQt5应用与实践
- AngularJS实践与应用
- PyQt5应用与实践
- webapp与安卓原生应用通信过程
- 【实践】用路由为webApp单页应用提供多入口
- webapp应用Servlet
- 移动端WebApp自适应实践
- Gentoo安装与应用实践
- Git与Github应用实践
- js笔记--应用与实践
- Fresco简单应用与实践
- CSS实践总结——选择器详解与字体样式
- 滚动选择器PickerView
- 滚动选择器PickerView
- Swift - 滚动选择器
- UNIX 对文件大小的操作
- 线程
- more effective c++之Item M3:不要对数组使用多态
- 模仿动态增加或者删除cell并自动增加变化高度
- JavaSE_JDBC编程
- webApp滚动选择器-实践与应用
- 关于Unity代码控制音频播放的问题
- 使用Ping++完成H5页面支付功能
- xcode远程编译打包签名问题
- 锋利的Jquery——学习笔记(五)DOM操作(二)
- 使用SerialDevice.FromIdAsync(dis[0].Id)生成SerialDevice时dis[0].Id存在,但SerialDevice为空的解决办法
- jedisLock—redis分布式锁实现
- JAVA开发微信图灵机器人【L】
- 用js做一个简单的电商放大镜效果