object picker 微信小程序_微信小程序 demo分享
选择器示例demo:
1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器
wxml
普通选择器:(普通数组)
当前选择:{{array[index]}}
普通选择器2:(普通json格式数组)
当前选择:{{objectArray[objectIndex].name}}
多列选择器:
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
时间选择器:
当前选择: {{time}}
日期选择器:
当前选择: {{date}}
省市区选择器:
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
js
Page({
data: {
//普通选择器:(普通数组)
array: ['选项1', '选项2', '选项3', '选项4'],
index: 0,//默认显示位置
//普通选择器2:(普通json格式数组)
objectArray: [
{
id: 0,
name: '中国'
},
{
id: 1,
name: '美国'
},
{
id: 2,
name: '德国'
},
{
id: 3,
name: '法国'
}
],
objectIndex: 0,//默认显示位置
//多列选择器:
multiArray: [['音频', '视频'], ['mp3', '评书']],//二维数组,长度是多少是几列
multiIndex: [0, 0],
//时间选择器:
time: '12:01',
//日期选择器:
date: '2016-09-01',
//省市区选择器:
region: ['请选择', '请选择', '请选择'],
customItem: '请选择'//为每一列的顶部添加一个自定义的项
},
//普通选择器:
bindPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
//普通选择器2:
bindPickerChange2: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
objectIndex: 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);
if (e.detail.column==0){//第1列
if (e.detail.value == 0) {//音频
this.setData({
multiArray: [['音频', '视频'], ['mp3', '评书']]
})
};
if (e.detail.value == 1) {//视频
this.setData({
multiArray: [['音频', '视频'], ['电影', '电视剧']]
})
};
};
},
//时间选择器:
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
//日期选择器:
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
//省市区选择器:
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
css
/*选择器 */
.section__title{
margin-bottom: 20rpx;
}
.section{
margin: 50rpx 0;
font-size: 30rpx;
}
效果图如下
获取多项选择器的值:
多列选择器:
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
Page({
data:{
//多列选择器:
multiArray: [['音频', '视频'], ['mp3', '评书']],//二维数组,长度是多少是几列
multiIndex: [0, 0],
},
//多列选择器:
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
console.log('1为:', this.data.multiArray[0][e.detail.value[0]])
console.log('2为:', this.data.multiArray[1][e.detail.value[1]])
},
})
欢迎各位学习微信小程序的小伙伴私信我,大家一起进步呀!
object picker 微信小程序_微信小程序 demo分享相关推荐
- Python贪吃蛇小游戏_完整源码免费分享
文章目录 Python 贪吃蛇小游戏 1. 导包 2. 配置初始化参数 3. 主函数及运行主体 4. 画食物的函数 5. 画贪吃蛇的函数 6. 画网格的函数(非必选,觉得多余的可以忽略此项) 7. 操 ...
- 如何微信链接自定义_微信链接自定义
微信在分享第三方网站是不显示缩略图和描述的,如下图所示 微信链接自定义_微信链接自定义 要解决这个问题必须调用微信JS-SDK接口,下面讲一下如何调用接口. 第一部分 准备步骤 注册微信公众号. 通过 ...
- webview 个人小程序_微信小程序新增Webview它是什么东西?
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
- input ios问题 小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色 卸载placeholder-class里面的co ...
- mysql传数据到微信小程序_微信小程序直播 数据同步与转存
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程所用项目框架为egg ...
- qml如何发布程序_微信小程序如何发布?公司和个人注册流程科普
如今制作微信小程序已经是非常简单的事了,即使是完全不懂技术的小白,也能利用小程序制作工具快速生成小程序,基本上选一个模板就能快速把页面搭建好. 不过,虽然小程序页面搭建很简单,但还有不少人不知道页面搭 ...
- ready等方法 微信小程序_微信小程序开发一些经验
对于微信小程序开发入门,还是比较简单的,只需要具备基本的css+js知识就可以了,成本比较低. 写了小程序和RN之后,有一种原生很笨重的感觉,就是小程序或者是RN等这些新的开发方式在效率上面真的有比较 ...
- ar 微信小程序_微信小程序开放AR功能,全面提升交互体验
1.什么是AR? AR又称增强现实(Augmented Reality)技术,是一种将虚拟信息与真实世界巧妙融合的技术,广泛运用了多媒体.三维建模.实时跟踪及注册.智能交互.传感等多种技术手段,将计算 ...
- 智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序
原标题:物业小程序物业微信小程序目前功能最全的物业小程序 以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...
- python登录微信pc版_微信PC版2.9.0测试版更新:新增小程序面板
3月26日讯,近日,腾讯微信团队推送了微信PC版2.9.0的公共测试更新,此次更新增加了不少实用功能,对过往的许多痛点也有所改进,个人非常期待微信2.9.0版本的正式更新. 作为国民级的通讯产品,腾讯 ...
最新文章
- 工程是.java文件_1.8 工程相关解析(各种文件,资源访问)
- 关于Windows Phone 7开发工具离线安装包
- 【推荐系统】手写ItemCF/UserCF代码,你会吗?
- 一篇文章教你学会Java基础I/O流
- TCP/IP及内核参数优化调优(转:https://www.cnblogs.com/jking10/p/5472386.html)
- 给定数组 求和等于固定值 算法_别人家的面试题:不可变数组快速范围求和
- 10/100. Majority Element
- python-day18(反射)
- 网站建设十大忠告,新手建站必看
- 亲身经历:一个00后的中专生是怎么在深圳拿到30K(Java后端开发)
- ArcMAP问题集锦(一)
- 计算机一级题库ps视频,计算机一级Photoshop题库及答案
- VSCode好用的插件
- 初等数学I 自然数 第一节 基数理论
- 3650m5设置u盘启动_联想启天M415设置u盘启动步骤(支持uefi/bios双启动)
- hightcharts-vue 蜡烛图 股票绘图 candlestick
- string++php,String 字符串
- 李嘉诚给年青人提出了53条人生忠告
- 免杀方法(四)Python免杀shellcode加载器
- 跟我学Android之一 概述
热门文章
- python numpy.random模块中提供啦大量的随机数相关的函数
- 性能优化CPU、内存、磁盘I/O、网络性能相关命令
- 轻松搭建一个Windows SVN服务器
- AUTOSAR从入门到精通100讲(十二)-V2X通信安全技术要求标准
- 牛客网-数据结构笔试题目(六)-最近点对问题求解思路
- python标准库模块_Python标准库模块之heapq
- Failed to compile. ./src/utils/request.js Module not found: Error: Can‘t resolve ‘util-merge‘ in ‘C
- 数据类型转换为false的有哪些?
- 大前端最强vscode教程(基础篇)
- kail利用msf工具对ms10-087漏洞入侵渗透WinXP