小程序组件 picker mode=”multiSelector”

picker,从底部弹起的滚动选择器。这里只讨论mode=”multiSelector”的格式

比较难理解的两个属性:range和value的搭配使用。

首先上官方定义:



1.    range必须是二维数组或者二维对象数组。

2.    value是一维数组,用于标记使用者选中了range里的哪几个值。

我们先考虑range为二维数组的情形:


由此可见,value数组第一项代表的是range中第一个数组里选中的值;value数组第二项代表的是range中第二个数组里选中的值。

range里有多少个数组,意味着value里有多少项

当用户改变picker里的值时,会触及到两个事件:columnchange和change。对应的handle可在bindcolumnchange里、bindchange里填写。还是和以前一样,上官方定义:



两者的区别在于,前者只要改变了某一列的值,哪怕没有真正选择它,都会触发columnchange事件;而后者只有真的选择了(即点击了选择器里的确定键),才能触发change事件。


现在我们来考虑range为二维对象数组的情形:


multiArray: [

      [{

          name: "江苏",

          key: "1"

      },

      {

          name: "安徽",

          key: "2"

      }],

      [{

          name:"南京",

          key:"1"

        },

        {

          name:"宿迁",

          key:"2"

        }]

    ],  (这里为了简化将multiArray的第二项城市写死了,实际上是会根据省的不同而动态变化)

注意:里面的每一个一维对象数组格式必须保持一致,否则选择器的展示会出现undefined。

为了能让小程序知道你究竟要展示的是name还是key,你需要range-key属性:



剩下的与range为二维数组的情形基本一致。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,282评论 19 139
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 14,768评论 0 38
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 33,783评论 18 399
  • 这是 chaim “ 365 日写作计划”第 42 天的写作内容。 昨晚凌晨1点多才睡觉,情绪不好。正因为如此,我...
    chaim阅读 1,409评论 0 0
  • “爱之欲其生,恶之欲其死”这是 人最真实的感情,可能会有人说,怎么 可能,我绝对不会出现这种情况的。其 ...
    wordwide阅读 4,916评论 0 1

友情链接更多精彩内容