微信小程序-自定义picker选择器

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序-自定义picker选择器脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序-自定义picker选择器

github地址

为什么要自定义picker

原生小程序picker不支持自定义样式,无联动。
该自定组件

  • 支持自定义数据
  • 支持自定义样式
  • 支持传入和返回对象或者基本类型
  • 支持联动(改变父列,子列根据关联自动变化)

使用

  • 直接将picker文件夹拖入工程
  • 在某page的json文件中配置
{
  "usingcomponents": {
    "picker": picker.js的相对路径
  }
}
<picker
    isShowPicker="{{isShow_02}}"
    bind:sure="sureCallBack_02"
    bind:cancle="cancleCallBack_02"
    scrollType="normal"
    listData="{{listData_02}}"
    indicatorStyle="height:80px"
    maskStyle=""
    titleStyle=""
    sureStyle="color:blue;font-Size:16px;"
    cancelStyle="color:red;font-size:16px;"
    chooseItemTextStyle="color:green;"
    pickerHeaderStyle="background:#eee;"
    titleText="自定义标题"
    cancelText="cancle"
    sureText="sure"
></picker>
  • 更多使用方式,可自行参考demo
参数说明
name type required default Description
isShowPicker Boolean false 显示隐藏picker,需要在bindsure和bindcancle中手动设为false
scrollType String 'normal' picker类型,'normal':非联动picker 'link':联动picker
listData @L_360_1@ [] picker数据,是一个数组,scrollType='normal'时,数组成员也是数组,数组成员数量就是picker列数;scrollType='link'时,listData格式需为固定格式
keyWordsOfShow String 'name' 当listData的的每一个成员,是由对象组成的数组时,keyWordsOfShow作为对象的key,其value用于显示;或者当picker='link'时,供显示的key
defaultPickData Array [] 设置picker默认选择
indicatorStyle String '' 设置选择器中间选中框的样式(详见picker-view)如,每一行的高度 view
maskStyle String '' 设置蒙层的样式(详见picker-view) view
titleStyle String '' 标题栏标题样式 view
sureStyle String '' 标题栏确定样式 text
cancelStyle String '' 标题栏取消样式 text
chooseItemTextStyle Array '' 设置picker列表文案样式 text
pickerHeaderStyle String '' 标题栏样式 view
titleText String '' 标题文案
cancelText String '' 取消按钮文案
sureText String '' 确定按钮文案
bindsure EventHandle 点击确定触发的事件,event.detail = value
bindcancle EventHandle 点击取消触发的事件
注意
  • 必须在bindsure和bindcancle中将isShowPicker设为false。
  • scrollType='normal'时,listData数据结构代码如下;当第二维数组的成员为对象时,需指定用于显示的key(通过keyWordsOfShow属性),默认为'name'。若要设置默认选中,设置 defaultPickData=[第一选中的列索引,第二选中的列索引,第三选中的列索引,...],如[1,2,1]

    //listData数据结构
     [ 
       [对象或者普通类型], 
       [对象或者普通类型], 
       [对象或者普通类型], 
       ...
       ]
    
  • scrollType='link'时,listData数据结构代码如下,"children"字段为必须;'用于显示的key'对应keyWordsOfShow属性。若要设置默认选中,设置 defaultPickData = [{第一列选中项对应的唯一key:value}, {第二列选中项对应的唯一key:value}, {第三列选中项对应的唯一key:value},...],如[{id:2},{id:21},{id:213}]
//listData数据结构
 [
   {
     用于显示的key:'',
     children:[
       {
          用于显示的key:'',
          children:[
            {
              用于显示的key:'',
              children:[
                      
              ],
              其他属性...,
             }      
          ],
          其他属性...,
       },
       ...
     ],
     其他属性...,
   },
   ...
 ]

更新日志

  • 0.0.1 初始化项目。

组件源码和demo请参考github地址

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序-自定义picker选择器全部内容,希望文章能够帮你解决微信小程序-自定义picker选择器所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。