ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-09-01 18:06:46  阅读:1004  来源: 互联网

标签:picker value Aarea dormitory multiIndexaddr hhd elseif data 选择器


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

一、单列选择器

和多列选择器相比,单列选择器的处理相对简单些
我们先看下微信开放文档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");

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

标签:picker,value,Aarea,dormitory,multiIndexaddr,hhd,elseif,data,选择器
来源: https://blog.csdn.net/qq_44754976/article/details/100181241

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有