微信小程序之picker组件
作为移动端的分发入口,微信小程序虽然没有当初期望的那么火,但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说,微信小程序对于开发还是很方便的,特别是对于白痴选手来说,基本不需要多少过多的学习,就能写一个不错的小程序。
下面就微信小程序常见的组件分别做详细的介绍,本篇主要介绍picker组件。运行效果如下:
picker选择器分为5种:分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器,可以用mode属性区分。
属性
普通选择器
设置mode = selector。
属性名 |
类型 |
默认值 |
说明 |
---|---|---|---|
range |
Array / Object Array |
[] |
mode为 selector 或 multiSelector 时,range 有效 |
range-key |
String |
当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
|
value |
Number |
0 |
value 的值表示选择了 range 中的第几个(下标从 0 开始) |
bindchange |
EventHandle |
value 改变时触发 change 事件,event.detail = {value: value} |
|
disabled |
Boolean |
false |
是否禁用 |
多列选择器
mode = multiSelector(最低版本:1.4.0)。
属性名 |
类型 |
默认值 |
说明 |
---|---|---|---|
range |
二维Array / 二维Object Array |
[] |
mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,”b”], [“c”,”d”]] |
range-key |
String |
当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
|
value |
Array |
[] |
value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始) |
bindchange |
EventHandle |
value 改变时触发 change 事件,event.detail = {value: value} |
|
bindcolumnchange |
EventHandle |
某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 |
|
disabled |
Boolean |
false |
是否禁用 |
时间选择器
时间选择器:mode = time。
日期选择器
日期选择器:mode = date。
fields 自动对应的有效值:
省市区选择器
mode = region(最低版本:1.4.0)。
官方示例
示例代码:
picker.wxml
<view class="section">
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
</view>
对应的packer.js文件
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
注:关于wxss样式文件这里不再罗列
省市县示例
我们再来看一下本文开始的时候的例子:
相关代码如下: feedback.wxml
<view class="container">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
<view class="fb-type">
<view class="type-label">{{array[index]}}</view>
<image class="type-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png"></image>
</view>
</view>
</picker>
<view class="fb-body">
<textarea class="content" placeholder="对我们网站、商品、服务,你还有什么建议吗?你还希望在严选上买到什么?请告诉我们..." />
<view class="text-count">0/500</view>
</view>
<view class="fb-mobile">
<view class="label">手机号码</view>
<view class="mobile-box">
<input class="mobile" placeholder="方便我们与你联系" />
<image class="clear-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/clear-fb-dd9d604f86.png"></image>
</view>
</view>
<button class="fb-btn">提交</button>
</view>
样式文件feedback.wxss
page{
background: #f4f4f4;
min-height: 100%;
}
.container{
background: #f4f4f4;
min-height: 100%;
padding-top: 30rpx;
}
.fb-type{
height: 104rpx;
width: 100%;
background: #fff;
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 30rpx;
padding-right: 30rpx;
}
.fb-type .type-label{
height: 36rpx;
flex: 1;
color: #333;
font-size: 28rpx;
}
.fb-type .type-icon{
height: 36rpx;
width: 36rpx;
}
.fb-body{
width: 100%;
background: #fff;
height: 374rpx;
padding: 18rpx 30rpx 64rpx 30rpx;
}
.fb-body .content{
width: 100%;
height: 100%;
color: #333;
line-height: 40rpx;
font-size: 28rpx;
}
.fb-body .text-count{
padding-top: 17rpx;
line-height: 30rpx;
float: right;
color: #666;
font-size: 24rpx;
}
.fb-mobile{
height: 162rpx;
width: 100%;
}
.fb-mobile .label{
height: 58rpx;
width: 100%;
padding-top: 14rpx;
padding-bottom: 11rpx;
color: #7f7f7f;
font-size: 24rpx;
padding-left: 30rpx;
padding-right: 30rpx;
line-height: 33rpx;
}
.fb-mobile .mobile-box{
height: 104rpx;
width: 100%;
color: #333;
padding-left: 30rpx;
padding-right: 30rpx;
font-size: 24rpx;
background: #fff;
position: relative;
}
.fb-mobile .mobile{
position: absolute;
top: 27rpx;
left: 30rpx;
height: 50rpx;
width: 100%;
color: #333;
line-height: 50rpx;
font-size: 24rpx;
}
.clear-icon{
position: absolute;
top: 43rpx;
right: 30rpx;
width: 28rpx;
height: 28rpx;
}
.fb-btn{
width: 100%;
height: 98rpx;
line-height: 98rpx;
background: #b4282d;
position: fixed;
bottom: 0;
left: 0;
border-radius: 0;
color: #fff;
font-size: 28rpx;
}
逻辑js:feedback.js
var app = getApp();
Page({
data: {
array: ['请选择反馈类型', '商品相关', '物流状况', '客户服务', '优惠活动', '功能异常', '产品建议', '其他'],
index: 0,
},
bindPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
- 0基础搭建Hadoop大数据处理-集群安装
- Validation of viewstate MAC failed 解决办法
- springmvc注入类 NoUniqueBeanDefinitionException: No qualifying bean of type [] is defined: expected sin
- springmvc注入类 NoUniqueBeanDefinitionException: No qualifying bean of type [] is defined: expected sin
- idea启动多个tomcat失败
- Log4Net 生成多个文件、文件名累加解决方法
- 【C#|.NET】lock(this)其实是个坑
- SpringMVC过程中@RequestBody接收Json的问题 总是报415
- 如何开发自己的搜索帝国之安装ik分词器
- 如何开发自己的搜索帝国之ES图形化Kibana安装与使用
- 高可用高性能分布式文件系统FastDFS进阶keepalived+nginx对多tracker进行高可用热备
- 分布式文件系统FastDFS如何做到高可用
- 分布式监控系统Zabbix3.2添加自动发现磁盘IO并注册监控
- SpringMVC提交数据遭遇基础类型和日期类型报400错误解决方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringBoot2.x集成Apache Shiro并完成简单的Case开发
- Spring Security权限框架理论与简单Case
- leetcode树之N叉树的前序遍历
- Spring Security 中的 hasRole 和 hasAuthority 有区别吗?
- python常见的import导包技巧
- 真正了解贪心算法,这是一篇精华入门总结...
- MGR修改max_binlog_cache_size参数导致异常
- 【技术创作101训练营】TensorFlow Lite的 GPU 委托(Delegate)加速模型推理
- 弄懂这 5 个问题,拿下 Python 迭代器!
- 1500字,8个问题,彻底理解堆!
- Python画王者荣耀英雄能力雷达图
- Python语言的精华:Itertools库
- MySQL为什么lsof会看到这么多临时文件
- IE浏览器主页被劫持,如何解决主页被篡改问题?
- 参与国际化项目一定要遵循的java命名规范