webApp滚动选择器-实践与应用
最近更新时间: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滚动选择器-实践与应用相关推荐
- Vant 组件库(VUE)的使用 Vant滚动选择器 选择器 传值
在 vue- cli 项目中安装 官方文档链接 npm ( 后面内容需要在控制台终端输入) # 通过 npm 安装 npm i vant -S 自动按需引入组件:babel-plugin-impor ...
- 通通玩blend美工(6)下——仿iPhone滚动选择器的ListBox(交互逻辑)
原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...
- 滚动时间选择器recyclerview_Android自定义可循环的滚动选择器CycleWheelView
最近碰到个项目要使用到滚动选择器,原生的NumberPicker可定制性太差,不大符合UI要求. 网上开源的WheelView是用ScrollView写的,不能循环滚动,而且当数据量很大时要加载的It ...
- android自定义滚轴选择器_Android自定义控件实战—滚动选择器PickerView
手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定 ...
- 一款极简的原生农历日期滚动选择器(小程序版本)体积小,速度快
轻量.可靠的农历滚动选择器
- range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
- Android自定义控件实战——滚动选择器PickerView
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301 手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器, ...
- android 自定义含有滚动选择器的对话框
最近在写一个项目,需要用到滚动选择器,本人的想法是弹出一个对话框,中间包含滚动选择器,其中滚动选择器的源码参考的这篇文章http://blog.csdn.net/zhongkejingwang/art ...
- Android 仿 iphone 自定义滚动选择器
转载请标明出处:http://blog.csdn.net/u011546655/article/details/45921025 背景:其实我们都知道,在我们做开发的过程中,会遇到Android 自身 ...
最新文章
- 2022-2028年中国康养地产行业市场需求前景及投资战略分析报告
- 服务机器人产品---避障设计
- linux bond 脚本,Linux--网卡聚合简单脚本(bond0)(示例代码)
- jzoj1246-挑剔的美食家【set,贪心】
- java 8 删选集合 和取集合中的字段重组成集合的使用
- esxi usb插口_酷暑大作战 | USB-C风扇新体验
- 就业技术书文件表格_就业申请书
- Android桌面悬浮窗仿QQ手机管家加速效果
- OpenERP工作流不同角色看属于自己审批的方法
- Acrobat DC安装教程
- 【Python机器学习】决策树ID3算法结果可视化附源代码 对UCI数据集Caesarian Section进行分类
- 手机遥控器在微信端的处理
- 手势识别整体设计流程方案
- C++ Primer 笔记——IO类
- 压敏电阻原理、参数、选型
- 泰山OFFICE技术讲座:由中英文混排,谈间距kerning
- 申请优豆云免费虚拟主机使用感受分享心得
- div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)(AJax)(转)
- 2021-5-8字符串作业
- python如何做混合模型面板回归_面板模型回归操作指南,适合初学者!
热门文章
- 滴滴服务器不稳定,“滴滴崩了”登上热搜!是什么原因导致滴滴崩了呢?
- 如何用python画小黄人_怎么用python画小黄人
- acm 2119 小火车嘟嘟
- ie浏览器float兼容性
- android 9谷歌相机,安卓谷歌相机9.0下载-谷歌相机9.0安卓版-电玩咖
- Cocos2d-x 3
- 前端性能优化:dns-prefetch和preload预加载资源
- 零基础能不能学计算机专业,零基础新手可不可以学会计算机电脑
- 计算机技术在注射模中的应用,CAD/CAM技术在注射模具设计,制造中的应用.pdf
- 读书笔记-人月神话4