news 2026/7/28 16:50:18

小程序——单列和多列picker选择器(二)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
小程序——单列和多列picker选择器(二)

在我的另一篇博文中已经提到了要解决的第一个问题:在未选择时展示引导内容,在下拉栏选择后显示选择内容
现在来解决第二个问题:存入值为文本值而不是角标

一、单列选择器

和多列选择器相比,单列选择器的处理相对简单些
我们先看下微信开放文档picker
中让页面显示为文字而不是角标的处理方式

<view class="picker"> 当前选择:{{array[index]}} </view>

可以看出index是下角标,显示文字时是以数组的形式,array[0],array[1]等,所以为了让数据库中存入的是文字形式我们可以把这部分内容在js中进行处理
附上xml和js代码:

xml:

<view class="addorder_99"> <picker name='Otime' bindchange="bindPickerChangetime"value="{{indextime}}" range="{{arraytime}}"> <view class="addorder_88"> <view class="{{indextime!=-1?'on':''}}" style="{{(indextime!=-1)?'color:black':'color:#C0C0C0'}}"> {{indextime!=-1?indextime:"请选择送达时间"}} </view> </view> </picker> </view>

js:

bindPickerChangetime: 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 class="picker"> 当前选择:{{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 class="address_3"> <picker name='Aarea' mode="multiSelector" bindchange="bindMultiPickerChangeaddr" bindcolumnchange="bindMultiPickerColumnChangeaddr" value="{{multiIndexaddr}}" range="{{multiArrayaddr}}"> <view class="address_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> </view>

js:

bindMultiPickerChangeaddr: 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 name="Aarea"> $area = substr($Aarea,0,strrpos($Aarea,",")); $dormitory = substr($Aarea,strripos($Aarea,",")+1); if ($area==0) { $area='北区'; if ($dormitory==0) $dormitory='桂园'; elseif ($dormitory==1) $dormitory='榴园'; elseif ($dormitory==2) $dormitory='李园'; elseif ($dormitory==3) $dormitory='梅园'; elseif ($dormitory==4) $dormitory='桃园'; elseif ($dormitory==5) $dormitory='杏园'; elseif ($dormitory==6) $dormitory='橘园'; } if ($area==1){ $area='南区'; if ($dormitory==0) $dormitory='涓苑'; elseif ($dormitory==1) $dormitory='清苑'; elseif ($dormitory==2) $dormitory='浩苑'; elseif ($dormitory==3) $dormitory='鸿苑'; elseif ($dormitory==4) $dormitory='瀚苑'; elseif ($dormitory==5) $dormitory='溪苑'; elseif ($dormitory==6) $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");

是保证存入数据库为中文字符而不是?或者拉丁文的形式。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/28 16:44:41

物联网设备安全芯片SE050与PIC18F2685的集成方案

1. 为什么物联网设备需要专用安全芯片&#xff1f;在智能家居和工业物联网项目中&#xff0c;开发者常面临一个两难选择&#xff1a;使用通用MCU虽然成本低&#xff0c;但安全防护薄弱&#xff1b;采用高端安全方案又会导致BOM成本飙升。这正是SE050 Plug&Trust安全元件与P…

作者头像 李华
网站建设 2026/7/28 16:43:09

URP水体渲染:动态生成渐变纹理实现数据驱动颜色控制

1. 项目概述&#xff1a;为什么要在URP里动态生成渐变图来做水&#xff1f;做水&#xff0c;大概是每个游戏开发者都绕不开的“甜蜜的烦恼”。尤其是在Unity的URP&#xff08;通用渲染管线&#xff09;环境下&#xff0c;大家第一时间想到的可能是去Asset Store找个现成的插件&…

作者头像 李华
网站建设 2026/7/28 16:42:47

Unity SSDLC框架:构建游戏开发全生命周期的安全免疫系统

1. 项目概述&#xff1a;为什么我们需要一个安全的Unity开发框架&#xff1f;如果你是一名Unity开发者&#xff0c;或者正在管理一个Unity项目团队&#xff0c;下面这个场景你一定不陌生&#xff1a;项目临近上线&#xff0c;突然发现某个核心功能模块存在一个严重的逻辑漏洞&a…

作者头像 李华
网站建设 2026/7/28 16:42:29

单片机开发总结

马上秋招了&#xff0c;复习一下单片机。 文章目录序言概述调研芯片的应用领域收集相关资料确认芯片内核架构了解芯片系统架构购买开发板与仿真器组织工程文件选择并配置编译环境总结序言 大二的时候玩过单片机&#xff0c;马上秋招了&#xff0c;linux只是会用&#xff0c;不…

作者头像 李华
网站建设 2026/7/28 16:42:08

物联网安全:SE050与STM32L041C6硬件加密实践

1. 物联网安全现状与SE050的定位 在2023年的物联网安全态势报告中&#xff0c;全球每天新增的物联网设备达到惊人的150万台&#xff0c;而其中采用基础安全方案的设备占比不足30%。这个数字背后隐藏着巨大的安全隐患——去年因物联网设备漏洞导致的数据泄露事件同比增长了217%。…

作者头像 李华