• 微信小程序多列选择器之range-key


    <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'name'}}">
       <view class="picker">
          当前选择:{{objectMultiArray[0][multiIndex2[0]].name}},{{objectMultiArray[1][multiIndex2[1]].name}}
       </view>
    </picker>

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        objectMultiArray: [
          [
            {
              id: 0,
              name: '无脊柱动物'
            },
            {
              id: 1,
              name: '脊柱动物'
            }
          ], [
            {
              id: 0,
              name: '扁性动物'
            },
            {
              id: 1,
              name: '线形动物'
            },
            {
              id: 2,
              name: '环节动物'
            },
            {
              id: 3,
              name: '软体动物'
            },
            {
              id: 3,
              name: '节肢动物'
            }
          ]
        ],
        multiIndex2: [0, 0],
      },
    
    
      bindMultiPickerChange2: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          multiIndex2: e.detail.value
        })
      },
      bindMultiPickerColumnChange2: function (e) {
        console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        var data = {
          objectMultiArray: this.data.objectMultiArray,
          multiIndex2: this.data.multiIndex2
        };
        data.multiIndex2[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
          case 0:
            switch (data.multiIndex2[0]) {
              case 0:
                data.objectMultiArray[1] = [
                  { id: 0, name: '扁性动物' },
                  { id: 1, name: '线形动物' },
                  { id: 2, name: '环节动物' },
                  { id: 3, name: '软体动物' },
                  { id: 3, name: '节肢动物' }
                ];
                // data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.objectMultiArray[1] = [
                  { id: 0, name: '鱼' },
                  { id: 1, name: '线形两栖动物' },
                  { id: 2, name: '爬行动物' }
                ];
                break;
            }
            data.multiIndex2[1] = 0;
            // data.multiIndex[2] = 0;
            break;
        }
        this.setData(data);
      }
    
     
    })
    
    

    请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!

     
  • 相关阅读:
    智能问答系统构思(持续更新)
    软件测试
    Android实现智能问答机器人(四) -----连接我们的系统
    软件架构模式---分层架构V2.0
    软件架构模式---分层架构
    PHP文件上传示例
    PHP文件上传常见类型checklist
    PHP操作Mysql数据库查询数据实例
    PHP操作Mysql数据库更新数据实例
    PHP 操作Mysql数据库删除数据示例
  • 原文地址:https://www.cnblogs.com/Oopa/p/7266976.html
Copyright © 2020-2023  润新知