微信小程序-自定义picker选择器
Clone or download
Latest commit 6dc2402 Dec 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
pages/index update Dec 11, 2018
picker 优化 Dec 11, 2018
README.md readme Dec 12, 2018
app.js init Dec 2, 2018
app.json init Dec 2, 2018
app.wxss init Dec 2, 2018
project.config.json init Dec 2, 2018

README.md

avatar

为什么要自定义picker

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

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

使用

  • 直接将picker文件夹拖入工程

  • 在某page的json文件中配置

{
  "usingComponents": {
    "picker": picker.js的相对路径
  }
}
  • 在page的wxml文件中使用
<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 Array [] 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 = {choosedData, choosedIndexArr} ,choosedData为选中项的数据, choosedIndexArr为选中项的索引数组;当scrollType='link'时choosedIndexArr无意义。
bindcancle EventHandle 点击取消触发的事件

注意

  • 模态框无法覆盖原生组件(参考原生组件),所以如果页面有原生组件,可以在isShowPicker为true设置原生组件display:none
  • 在使用该组件的page页面中,禁止出现'.wrapper'类名,否则会出现样式问题,如果用到请换个名字。( 我也觉得很奇怪 )
  • 必须在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:[
                      
              ],
              其他属性...,
             }      
          ],
          其他属性...,
       },
       ...
     ],
     其他属性...,
   },
   ...
 ]

如果觉得有用,请给个start,谢谢