小程序——单列和多列picker选择器（一）

参考资料：微信开放文档picker

一、解决问题：在未选择时展示引导内容，在下拉栏选择后显示选择内容

参考资料：小程序picker简单使用

在微信开放文档给的实例代码中未选择的时候显示为空白，但是在实际开发的过程中往往应当引导用户进行选择，比如显示：请选择。本篇就可以解决未选择为空白的问题。

1.效果图：

未选择时：

选择后：（会显示选择的内容）

2.代码示例（以其中一个为例）

附xml和js代码

xml：

        <view class="accorder1_111">
          <picker bindchange="bindPickerChangetype" value="{{indextype}}" range="{{arraytype}}">
            <view class="accorder1_120">
              <view class="{{indextype!=-1?'on':''}}">
                {{indextype!=-1?indextype:"快递类型"}}
              </view>
            </view>
          </picker>
        </view>

js:

data:{
    arraytype: ["全部", "普通件", "急件", "专人代取"],
    indextype: -1,
    },
bindPickerChangetype: function (e) {
var that = this
console.log('picker发送选择改变，携带值为', this.data.arraytype[e.detail.value])
this.setData({
      indextype: this.data.arraytype[e.detail.value],
 	})
 }

先看下这个选择器的原理，再触发了绑定事件bindPickerChangetype以后对indextype 的值进行了改变，注意此时改变的是value="{{indextype}}"中的值（也就是要做到和value对应，否则会出现存储错误）

处理显示内容的时候利用三目运算符

              <view class="{{indextype!=-1?'on':''}}">
                {{indextype!=-1?indextype:"快递类型"}}
              </view>

最开始的时候在data中令indextype=-1（微信开放文档中没有这一项），并利用三木运算符进行判断，未选择的时候一定为-1，所以最开始（在我的例子中）会显示：快递类型。因为indextype的值我在bindPickerChangetype中进行了数组角标的处理所以选择的时候会显示为文本而不是数组角标的形式

当然，如果要为未选择时候的文字设置特殊的样式也可以用同样的方法

        <view class="accorder1_111">
          <picker bindchange="bindPickerChangetype" value="{{indextype}}" range="{{arraytype}}" >
            <view class="accorder1_120">
              <view class="{{indextype!=-1?'on':''}} style="{{indextype!=-1?'color:black':'color:#C0C0C0'}}">
                {{indextype!=-1?indextype:"快递类型"}}
              </view>
            </view>
          </picker>
        </view>

这样未选择的时候“快递类型”就会显示为灰色

3.多列选择器中的坑

data：{
	multiIndexto: [-1, -1]
}

这样写在开发者工具中会一直显示为未选择状态，笔者最开始担心角标存入错误的情况，比如说第二列可选择，第一列仍为未选择的情况（因为最开始的角标是-1），但是在手机中会使默认选择的情况
所以不会出现存入为-1的情况

二、解决问题：存入值为文本值而不是角标

存入值为文本值而不是角标