小程序——单列和多列picker选择器(二)
在我的另一篇博文中已经提到了要解决的第一个问题在未选择时展示引导内容在下拉栏选择后显示选择内容现在来解决第二个问题存入值为文本值而不是角标一、单列选择器和多列选择器相比单列选择器的处理相对简单些我们先看下微信开放文档picker中让页面显示为文字而不是角标的处理方式view classpicker 当前选择{{array[index]}} /view可以看出index是下角标显示文字时是以数组的形式array[0],array[1]等所以为了让数据库中存入的是文字形式我们可以把这部分内容在js中进行处理附上xml和js代码xmlview classaddorder_99 picker nameOtime bindchangebindPickerChangetimevalue{{indextime}} range{{arraytime}} view classaddorder_88 view class{{indextime!-1?on:}} style{{(indextime!-1)?color:black:color:#C0C0C0}} {{indextime!-1?indextime:请选择送达时间}} /view /view /picker /viewjsbindPickerChangetime: function (e) { console.log(picker发送选择改变携带值为, this.data.arraytime[e.detail.value]) this.setData({ indextime: this.data.arraytime[e.detail.value] }) },可以在控制台中看到输出的直接为值的形式注意触发了绑定事件bindPickerChangetime以后对indextime的值进行了改变注意此时改变的是value{{indextime}}中的值也就是要做到和value对应否则会出现存储错误e.detail.value是数组下标在js函数中已通过类似数组的形式进行了文字的转换二、多列选择器以两列选择器为例view classpicker 当前选择{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}} /view通过开放文档中的示例我们可以看出多列选择器无法直接使用在js中直接处理的方式以multiArray[0][multiIndex[0]]为例multiArray[0]代表的是第一列multiIndex[0]是判断选择选择了什么也就是只知道数组下标。multiArray[0]相当于array[index]中的arraymultiIndex[0]相当于index因为多列选择器绑定的是两个函数一个作为最终的结果处理一个具体分析选择的是哪一列以及选中列对应的内容再加上value{{multiIndex}所以只能返回数组的形式然后在后端进行处理附代码xml注 三目运算符的书写方式见我另一篇博文 在未选择时展示引导内容在下拉栏选择后显示选择内容view classaddress_3 picker nameAarea modemultiSelector bindchangebindMultiPickerChangeaddr bindcolumnchangebindMultiPickerColumnChangeaddr value{{multiIndexaddr}} range{{multiArrayaddr}} view classaddress_5 view class{{(multiIndexaddr[0]||multiIndexaddr[1])0?on:}} style{{(multiIndexaddr[0]||multiIndexaddr[1])!-1?color:black:color:#C0C0C0}} {{(multiIndexaddr[0]||multiIndexaddr[1])0?multiArrayaddr[0][multiIndexaddr[0]]-multiArrayaddr[1][multiIndexaddr[1]]:送达地点}} /view /view /picker /viewjsbindMultiPickerChangeaddr: function (e) { console.log(picker发送选择改变携带值为, e.detail.value) console.log(this.data.multiArrayaddr[0][[e.detail.value[0]]]), console.log(this.data.multiArrayaddr[1][[e.detail.value[1]]]), this.setData({ multiIndexaddr: e.detail.value }) }, bindMultiPickerColumnChangeaddr: function (e) { console.log(修改的列为, e.detail.column, 值为, e.detail.value); var data { multiArrayaddr: this.data.multiArrayaddr, multiIndexaddr: this.data.multiIndexaddr }; data.multiIndexaddr[e.detail.column] e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndexaddr[0]) { case 0: data.multiArrayaddr[1] [桂园, 榴园, 李园, 梅园, 桃园, 杏园, 橘园]; break; case 1: data.multiArrayaddr[1] [涓苑, 清苑, 浩苑, 鸿苑, 瀚苑, 溪苑, 澈苑]; break; } data.multiIndexaddr[1] 0; break; } console.log(data.multiIndexaddr); this.setData(data); },看下控制台信息输出控制台虽然写的是[0,0]这样的形式但是后台输入保存时为0,0可以在php中进行echo也就是字符串的形式在php中进行值的转化php$Aarea$_POST[Aarea]; //这句是前端中picker nameAarea $area substr($Aarea,0,strrpos($Aarea,,)); $dormitory substr($Aarea,strripos($Aarea,,)1); if ($area0) { $area北区; if ($dormitory0) $dormitory桂园; elseif ($dormitory1) $dormitory榴园; elseif ($dormitory2) $dormitory李园; elseif ($dormitory3) $dormitory梅园; elseif ($dormitory4) $dormitory桃园; elseif ($dormitory5) $dormitory杏园; elseif ($dormitory6) $dormitory橘园; } if ($area1){ $area南区; if ($dormitory0) $dormitory涓苑; elseif ($dormitory1) $dormitory清苑; elseif ($dormitory2) $dormitory浩苑; elseif ($dormitory3) $dormitory鸿苑; elseif ($dormitory4) $dormitory瀚苑; elseif ($dormitory5) $dormitory溪苑; elseif ($dormitory6) $dormitory澈苑; } $Aarea$area.-.$dormitory; mysqli_query($con,set names utf8);关键代码$area substr($Aarea,0,strrpos($Aarea,,)); $dormitory substr($Aarea,strripos($Aarea,,)1);参考资料php处理根据标点处理字符串在上文已经说过传进来是字符串且用,进行分割注意这里是英文的,只要把变量名对应好就能做处理和分割如果是多列选择器可以采用多次划分的形式$Aarea$area.-.$dormitory;这句代码是让$Aarea的值进行重新的组合因为我想让数据库中存入的是 北区-桂园的形式 如果想存入北区桂园 代码应当写为$Aarea$area..$dormitory;也就是想让怎么连接就在两个.直接填写什么参考资料如何在PHP中将两个字符串组合在一起mysqli_query($con,set names utf8);是保证存入数据库为中文字符而不是或者拉丁文的形式。

相关新闻

功率计读数偏低?先别送修,查查探头校准

功率计读数偏低?先别送修,查查探头校准

做射频测试的人都遇到过这种情况:功率计测出来的数值,怎么比预期低了好几个 dB?换个信号源还是低,换根电缆还是低,甚至换台主机都一样 —— 难道探头坏了?很多人第一反应是 "功率计不准了,得送修"。但实际…

2026/11/2 8:49:28 阅读更多 →
Blueman蓝牙管理器:Linux桌面蓝牙管理的终极解决方案

Blueman蓝牙管理器:Linux桌面蓝牙管理的终极解决方案

Blueman蓝牙管理器:Linux桌面蓝牙管理的终极解决方案 【免费下载链接】blueman Blueman is a GTK Bluetooth Manager 项目地址: https://gitcode.com/gh_mirrors/bl/blueman 在Linux桌面环境中管理蓝牙设备常常让人感到头疼,特别是当你需要连接音…

2026/10/25 10:25:30 阅读更多 →
高帧率视频素材哪里找?2026年适合高频创作团队的5个网站

高帧率视频素材哪里找?2026年适合高频创作团队的5个网站

引言:视频产量提高后,素材效率比单纯数量更重要IAB在2026年行业研究中指出,接近三分之二的数字视频广告买家已经在创意制作中使用生成式AI,高于2025年的约一半;与此同时,93%的买家认为直播内容具有更高价值…

2026/11/1 13:32:13 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/11/2 0:25:10 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/11/2 10:46:11 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/11/2 10:47:40 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/11/2 1:16:51 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/11/2 10:46:31 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/11/2 10:46:26 阅读更多 →

日新闻

周新闻

月新闻