picker选择器

picker选择器

代码如下

      <view class="element1" wx:if="{{item.situation == 1}}">目前状态：
        <text class='right' style="color: rgba(255, 204, 0, 1);">{{array[item.situation]}}</text>
        <picker class="edit" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">修改</picker>
      </view>
      <view class="element1" wx:if="{{item.situation == 2}}">目前状态：
        <text class='right' style="color: rgba(255, 204, 0, 1);">{{array[item.situation]}}</text>
        <picker class="edit" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">修改</picker>
      </view>
      <view class="element1" wx:if="{{item.situation == 0}}">目前状态：
        <text class='right' style="color: rgba(20, 196, 170, 1);">{{array[item.situation]}}</text>
        <picker class="edit" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">修改</picker>

这个还可以实现不同选项显示字体颜色不同，根据wx:if即可实现

多项选择器

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>

ps：本人需要的是点击按钮后展示picker选择器，然后更新数据，所以js动态绑定稍有复杂，需要将列表的某一项的某一个属性更改

picker更新数据

//data
array: ['已完成', '维修中', '待处理'],

//更新picker数据
  bindPickerChange: function (e) {
    //var index = e.currentTarget.dataset.index常规来说应该是这行代码
    let type = this.data.type
    // console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      [`historyList[`+type+`].situation`]:e.detail.value
    })
  },

Error: Only digits (0-9) can be put inside [] in the path string: historyList[undefined].situation
报错原因要不就是index无定义要不就是数据类型不是num

我按常规方法会报错index无定义有以下原因

• 使用按钮传参（event）不匹配
• 本人使用wx:for动态渲染所有数据，该picker只是其中之一，index无法正常获取
• 整个页面是根据上一个页面传的参数（type）渲染出来的，type在其中代码相当于index，我在这里借用

列表某一项某一键值对更新数据

[`historyList[`+type+`].situation`]

• 一定要使用[]和``而不是""，这是为了让系统找到你所想要改变的地方
• historyList是列表名字
• type是index
• index还可以使用[${index}]的形式
• situation是想要更新的键值对

补充

input 有一个属性是disabled

disabled："disabled"

可以将input变成不可读、不可输入、不可选择
还有其他属性，这里就不一一列出来了
但是想要input刚开始就有值，且是动态绑定的
可以设置placeholder默认值为动态绑定的即可
想要点击按钮后才能输入的功能过于复杂，我还没有能力实现
但是可以参考vue组件，有相关功能的简单实现
普通js实现起来很难