(精华)2020年7月30日 微信小程序 选择器的使用
发布日期:2021-06-29 15:08:33
浏览次数:2
分类:技术文章
本文共 6403 字,大约阅读时间需要 21 分钟。
picker 从底部弹起的滚动选择器
普通选择器 当前选择:{ { array[index]}} 多列选择器 当前选择:{ { multiArray[0][multiIndex[0]]}},{ { multiArray[1][multiIndex[1]]}},{ { multiArray[2][multiIndex[2]]}} 时间选择器 当前选择: { { time}} 日期选择器 当前选择: { { date}} 省市区选择器 当前选择:{ { region[0]}},{ { region[1]}},{ { region[2]}}
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; break; } console.log(data.multiIndex); 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 }) }})
picker-view 嵌入页面的滚动选择器
{ { year}}年{ { month}}月{ { day}}日{ { isDaytime ? "白天" : "夜晚"}} { { item}}年 { { item}}月 { { item}}日
const date = new Date()const years = []const months = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i)}for (let i = 1; i <= 12; i++) { months.push(i)}for (let i = 1; i <= 31; i++) { days.push(i)}Page({ onShareAppMessage() { return { title: 'picker-view', path: 'page/component/pages/picker-view/picker-view' } }, data: { years, year: date.getFullYear(), months, month: 2, days, day: 2, value: [9999, 1, 1], isDaytime: true, }, bindChange(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[2]], isDaytime: !val[3] }) }})
slider 滑动选择器
var pageData = { }for (var i = 1; i < 5; ++i) { (function (index) { pageData[`slider${ index}change`] = function (e) { console.log(`slider${ index}发生change事件,携带值为`, e.detail.value) } })(i);}Page(pageData)
slider 滑块 设置left/right icon 设置step 显示当前value 设置最小/最大值
转载地址:https://codeboy.blog.csdn.net/article/details/107686367 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月28日 05时35分30秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
电气毕业生在国家电网都干啥工作?
2019-04-29
为什么LED灯会越用越暗?
2019-04-29
为什么说卷积神经网络,是深度学习算法应用最成功的领域之一?
2019-04-29
在电网工作,有多高大上?
2019-04-29
「2020年大学生电子设计竞赛分享」电源题,省一等奖!
2019-04-29
又一国产开源微内核操作系统上线!源代码已开放下载
2019-04-29
10年老兵!从大学毕业生到嵌入式系统工程师的修炼之道……
2019-04-29
如何才能学好单片机?
2019-04-29
一根网线有这么多“花样”,你知道吗?
2019-04-29
雷军1994年写的诗一样的代码,我把它运行起来了!
2019-04-29
2020年大学生电子设计竞赛,B题,单相在线式不间断电源,详细技术方案!
2019-04-29
大佬终于把鸿蒙OS讲明白了,收藏了!
2019-04-29
C语言指针,这可能是史上最干最全的讲解啦(附代码)!!!
2019-04-29
国内大陆有哪些芯片公司处于世界前10?一起看看!
2019-04-29
单精度、双精度、多精度和混合精度计算的区别是什么?
2019-04-29
中国35位“大国工匠”榜单出炉!西工大、西电合计占半壁江山!清华仅1人!...
2019-04-29
知乎热议:嵌入式开发中C++好用吗?
2019-04-29
2020,Python 已死?
2019-04-29
漫画:程序员相亲?哈哈哈哈哈哈
2019-04-29
30种EMC标准电路分享,再不收藏就晚了!
2019-04-29