官方链接
- 原生 js 移动端选择控件，不依赖任何库
- 可传入普通数组或者 json 数组
- 可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择
自动识别是否级联
- 选择成功后，提供自定义回调函数 callback()返回当前选择索引位置、以及选择的数据（数组/json）
- 每次手势滑动结束后，也提供一个回调函数 transitionEnd() 返回当前选择索引位置、以及选择的数据（数组/json）
- 能够在已经实例化控件后，提供 update 函数再次渲染，可用于异步获取数据或点击交互后需要改变所选数据的场景
- 提供重定位函数
- 可以回显（第二次进入页面时，可以显示历史选择的位置）
引入
- 标签形式引入
- NPM安装
npm install mobile-select -D
快速使用
- 普通数组格式-非联动
- json 格式-非联动
- json 格式-联动
- 在 vue-cli 中如何使用
npm install mobile-select -D
- 数据字段名映射
参数
| 参数 |
默认值 |
类型 |
描述 |
| trigger |
必填参数 无默认值 |
String |
触发对象的 id/class/tag |
| wheels |
必填参数 无默认值 |
Array |
数据源,需要显示的数据 |
| callback |
function(indexArr, data){} |
function |
选择成功后触发的回调函数，返回 indexArr、data |
| transitionEnd |
function(indexArr, data){} |
function |
每一次手势滑动结束后触发的回调函数,返回 indexArr、data |
| cancel |
function(indexArr, data){} |
function |
返回的是 indexArr 和 data 是上一次点击确认按钮时的值 |
| onShow |
function(e){} |
function |
显示控件后触发的回调函数, 返回参数为对象本身 |
| onHide |
function(e){} |
function |
隐藏控件后触发的回调函数, 返回参数为对象本身 |
| title |
'' |
String |
控件标题 |
| position |
[0,0,0,…] |
Array |
初始化定位 |
| connector |
' ' |
String |
多个轮子时，多个值中间的连接符，默认是空格 |
| ensureBtnText |
'确认' |
String |
确认按钮的文本内容 |
| cancelBtnText |
'取消' |
String |
取消按钮的文本内容 |
| ensureBtnColor |
'#1e83d3' |
String |
确认按钮的文本颜色 |
| cancelBtnColor |
'#666666' |
String |
取消按钮的文本颜色 |
| titleColor |
'#000000' |
String |
控件标题的文本颜色 |
| titleBgColor |
'#ffffff' |
String |
控件标题的背景颜色 |
| textColor |
'#000000' |
String |
轮子内文本的颜色 |
| bgColor |
'#ffffff' |
String |
轮子背景颜色 |
| maskOpacity |
0.7 |
Number |
遮罩透明度 |
| keyMap |
{id:'id', value:'value', childs:'childs'} |
Object |
字段名映射，适用于字段名不匹配 id,value,childs 的数据格式 |
| triggerDisplayData |
true |
Boolean |
在点击确认时，trigger 的 innerHtml 是否变为选择的数据。 |
注：回调函数中返回的参数含义如下
- indexArr 是当前选中的索引数组 如[0,0,1] 代表有三个轮子 选中的数据是第一个轮子的第 0 个数据、第二个轮子的第 0 个数据、第三个轮子的第 1 个数据
- data 是当前选中的 json 数据 如[{id:'1',value:'hello'},{id:'2',value:'world'}]
功能函数
| 函数名 |
参数 |
描述 |
| show() |
无参 |
手动显示弹窗组件 |
| hide() |
无参 |
手动隐藏弹窗组件 |
| setTitle() |
string |
设置控件的标题 |
| locatePosition() |
sliderIndex, posIndex |
传入位置数组，重新定位轮子选中的位置 |
| updateWheel() |
sliderIndex, data |
重新渲染指定的轮子 |
| updateWheels() |
data |
重新渲染所有轮子(仅限级联数据格式使用) |
| getValue() |
无参 |
获取组件选择的值 |
注：功能函数中需要传递的参数含义如下
- sliderIndex 代表的是要修改的轮子的索引
- posIndex 代表位置索引
功能函数 demo
var mySelect = new MobileSelect({ trigger: '#day', wheels: [
{data:['周日','周一','周二','周三','周四','周五','周六']},
{data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']} ],
position:[1,1] //初始化定位 两个轮子都选中在索引1的选项 });
//进行基础的实例化之后，对实例用功能函数操作
mySelect.setTitle('啦啦啦(???????)'); // 设置控件的标题
mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
// 更新第0个轮子的数据，数据变为英文的星期几 // mySelect.locatePosition(1,0);
//重新定位第1个轮子的位置，将第1个轮子的第0个数据改为当前选中
//(第1个轮子是指右边的轮子，左边的轮子是第0个)
ajax 异步填充数据 demo
如何回显选择的位置
- callback 回调函数里有一个 indexArr 参数，它是一个数组，记录着当前选中的位置：
- 把这个数组转化为字符串之后，可以用隐藏域或者别的其他方式保存下来，传给后台。
- 下次打开页面时，MobileSelect 实例化的时候，读取这个字符串，再转成数组，传给 position，完成初始化定位即可。