在我的另一篇博文中已经提到了要解决的第一个问题在未选择时展示引导内容在下拉栏选择后显示选择内容现在来解决第二个问题存入值为文本值而不是角标一、单列选择器和多列选择器相比单列选择器的处理相对简单些我们先看下微信开放文档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);是保证存入数据库为中文字符而不是或者拉丁文的形式。
小程序——单列和多列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);是保证存入数据库为中文字符而不是或者拉丁文的形式。
