picker |
您所在的位置：网站首页 › excel快速定位数据来源是什么 › picker |
picker
|
picker-extend.js
一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.. 特性 原生js移动端选择控件，不依赖任何库 可传入普通数组或者json数组 可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择 自动识别是否级联 选择成功后，提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据（数组/json） 每次手势滑动结束后，也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据（数组/json） 能够在已经实例化控件后，提供update函数再次渲染，可用于异步获取数据或点击交互后需要改变所选数据的场景 提供重定位函数 可以回显（第二次进入页面时，可以显示历史选择的位置） 支持级联内容的扩展 比如 对于三级联动类目增加推荐字段 对三级联动地区 - 增加推荐字样（特殊化展示）简书 picker-extend 移动端级联选择插件（简书） 掘金 picker-extend 移动端级联选择插件（掘金） npm 地址 picker-extend 移动端级联选择插件 （npm） 引入 方式一 标签引入： 方式二 npm： npm install picker-extend -D在你的js文件中import： import PickerExtend from 'picker-extend' 快速使用 ①普通数组格式-非联动 var pickerExtend1 = new PickerExtend({ trigger: '#trigger1', title: '单项选择', wheels: [ {data:['周日','周一','周二','周三','周四','周五','周六']} ], position:[2] //初始化定位 }); ②json格式-非联动 var pickerExtend2 = new PickerExtend({ trigger: '#trigger2', title: '地区选择', wheels: [ {data:[ {id:'1',value:'附近'}, {id:'2',value:'上城区'}, {id:'3',value:'下城区'}, {id:'4',value:'江干区'}, {id:'5',value:'拱墅区'}, {id:'6',value:'西湖区'} ]}, {data:[ {id:'1',value:'1000米'}, {id:'2',value:'2000米'}, {id:'3',value:'3000米'}, {id:'4',value:'5000米'}, {id:'5',value:'10000米'} ]} ], callback:function(indexArr, data){ console.log(data); //返回选中的json数据 } }); 效果图：[图片上传失败...(image-6fbf94-1536046640642)] ③json格式-联动 var pickerExtend3 = new PickerExtend({ trigger: '#trigger3', title: '地区选择-联动', wheels: [ {data:[ { id:'1', value:'附近', childs:[ {id:'1',value:'1000米'}, {id:'2',value:'2000米'}, {id:'3',value:'3000米'}, {id:'4',value:'5000米'}, {id:'5',value:'10000米'} ] }, {id:'2',value:'上城区'}, {id:'3',value:'下城区'}, {id:'4',value:'江干区'}, {id:'5',value:'拱墅区'}, {id:'6',value:'西湖区'} ]} ], position:[0,1], callback:function(indexArr, data){ console.log(data); //返回选中的json数据 } }); 效果图：基础实例 → 功能函数操作后 [图片上传失败...(image-95d5aa-1536046640642)] [图片上传失败...(image-7379f1-1536046640642)] ②ajax异步填充数据demo var mobileSelect6 = new PickerExtend({ trigger: '#trigger6', title: 'ajax填充数据-非级联', wheels: [ {data:[ {id:'1',value:'请选择地区'}, ]}, {data:[ {id:'1',value:'请选择距离'}, ]} ], callback:function(indexArr, data){ console.log(data); } }); $.ajax({ type: "POST", url: "xxxx", data: {}, dataType: "json", success: function(res){ //这里假设获取到的res.data.area为： // [ // {id:'1',value:'附近'}, // {id:'2',value:'福田区'}, // {id:'3',value:'罗湖区'}, // {id:'4',value:'南山区'} // ] //这里假设获取到的res.data.distance为： // [ // {id:'1',value:'200米'}, // {id:'2',value:'300米'}, // {id:'3',value:'400米'} // ] mobileSelect6.updateWheel(0, res.data.area); //更改第0个轮子 mobileSelect6.updateWheel(1, res.data.distance); //更改第1个轮子 } }); var mobileSelect7 = new PickerExtend({ trigger: '#trigger7', title: 'ajax填充数据-级联', wheels: [ {data:[ { id:'1', value:'', childs:[ {id:'A1',value:''}, ] } ]} ], callback:function(indexArr, data){ console.log(data); } }); $.ajax({ type: "POST", url: "xxxx", data: {}, dataType: "json", success: function(res){ //这里假设获取到的res.data为： // [{ // id:'1', // value:'更新后数据', // childs:[ // {id:'A1',value:'apple'}, // {id:'A2',value:'banana'}, // {id:'A3',value:'orange'} // ] // }] mobileSelect7.updateWheels(res.data); } }); 如何回显选择的位置callback回调函数里有一个indexArr参数，它是一个数组，记录着当前选中的位置： 把这个数组转化为字符串之后，可以用隐藏域或者别的其他方式保存下来，传给后台。 下次打开页面时， MobileSelect实例化的时候，读取这个字符串，再转成数组，传给position，完成初始化定位即可。 增加推荐字段的demo：传入的keymap中 有一个recommend字样 通过设置为true或者false 来显示这个推荐字段 （用户可自定义修改源码 进行扩展） 通过改变配置项中flexibleHeight（用户自定义传入),字体大小可由用户根据css进行设置 以达到通用性和个性化的配置 var mobileSelect = this.mobileSelect = new PickerExtend({ trigger: '#trigger', title: '类目选择', wheels: [ {data: CITY_DATA} ], keyMap: { id: 'cat_id', value: 'cat_name', childs: 'detail', recommend: 'recommend' }, // 初始化为000 如果是编辑商品的情况 我们可以通过api去设置 // position: [0, 0, 0], flexibleHeight: '80', callback: function (indexArr, data) { console.log('选择成功之后的回调函数') console.log(indexArr) console.log(data) // 返回选中的json数据 } }) 效果如下 |
【本文地址】
今日新闻 |
推荐新闻 |