更新时间:2020-11-09 01:27:14
这款插件的使用主要是mobileSelect.js和mobileSelect.css的引入,建议在网上搜索mobileSelect的文档,里面关于mobileSelect中方法的使用和介绍,但具体的根据不同的功能要自己用js或者jq进行插件的修改,一般的mobileSelect中都是等点击的时候才弹出弹窗,但是我们可以在其js文件中进行修改,在MobileSelect.prototype方法中添加
_this.show()
直接显示,然后在页面需要的时候自己用js手动的让他显示和隐藏,其中的trigger属性是触发这个函数的关键属性,可以绑定一个类名或id名等等。也可以在其中设置确认和取消按钮的文本,改插件就把取消按钮给隐藏了。
具体方法请看详细文档参数
选项 默认值 类型 描述
trigger 必填参数 无默认值 String 触发对象的id/class/tag
wheels 必填参数 无默认值 Array 数据源,需要显示的数据
title '' String 控件标题 position [0,0,0,…]Array 初始化定位
connector ' ' String 多个轮子时,多个值中间的连接符,默认是空格
callback function(indexArr, data){} function 选择成功后触发的回调函数,返回indexArr、data transitionEnd function(indexArr, data){} function 每一次手势滑动结束后触发的回调函数,返回indexArr、data ensureBtnText '确认' String 确认按钮的文本内容
cancelBtnText '取消' String 取消按钮的文本内容
ensureBtnColor '#1e83d3' String 确认按钮的文本颜色
cancelBtnColor '#666666' String 取消按钮的文本颜色
titleColor '#000000' String 控件标题的文本颜色
titleBgColor '#ffffff' String 控件标题的背景颜色
textColor '#000000' String 轮子内文本的颜色
bgColor '#ffffff' String 轮子背景颜色
keyMap {id:'id', value:'value', childs:'childs'} Object 字段名映射,适用于字段名不匹配id,value,childs的数据格式 triggerDisplayData true Boolean 在点击确认时,trigger的innerHtml是否变为选择的数据。 (如果trigger里面还有其他元素,则可以设置为false;如果需要在别的地方显示数据,则可用callback返回的数据自行拼接)
注:回调函数中返回的参数含义如下
indexArr是当前选中的索引数组 如[0,0,1] 代表有三个轮子 选中的数据是第一个轮子的第0个数据、第二个轮子的第0个数据、第三个轮子的第1个数据 data是当前选中的json数据 如
[{id:’1’,value:’hello’},{id:’2’,value:’world’}]
功能函数:
函数名 参数 描述
setTitle() string 设置控件的标题
locatePosition() sliderIndex, posIndex 传入位置数组,重新定位轮子选中的位置
updateWheel() sliderIndex, data 重新渲染指定的轮子
updateWheels() data 重新渲染所有轮子(仅限级联数据格式使用)
show() 无参 唤起弹窗组件
getValue() 无参 获取组件选择的值
注:功能函数中需要传递的参数含义如下
sliderIndex 代表的是要修改的轮子的索引
posIndex 代表位置索引