js 阅读 2336
js 第12章 js联动选择插件mobileSelect.js

js 第12章 js联动选择插件mobileSelect.js

2022-07-18 • lulubin

1、功能介绍

①、简介

一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

②、特性

  • 原生js移动端选择控件,不依赖任何库

  • 可传入普通数组或者json数组

  • 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择

  • 自动识别是否级联

  • 选择成功后,提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据(数组/json)

  • 每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据(数组/json)

  • 能够在已经实例化控件后,提供update函数,传其他参数再次渲染

  • 提供重定位函数

2、使用方法

①、引入

https://file.lulublog.cn/images/3/2022/08/uSIYYGyGHmyiY9gi9jGWFwyCGyytyF.png?sign=3e0104fdf4a13b8621d81b23596c27f3&t=6acd0400

②、快速入门

A 普通数组格式-非联动

https://file.lulublog.cn/images/3/2022/08/k9rgX998V9r3tVx8RmW9GJ3cmX5R9W.png?sign=61230a6937eb5a61d7a6f168a63de321&t=6acd0400

B json格式-非联动

https://file.lulublog.cn/images/3/2022/08/V9cooSjhvlvcoswOozL58JsL5lcZHj.png?sign=34102b71bc3cbed37c7d0526752f64b8&t=6acd0400

C json格式-联动

https://file.lulublog.cn/images/3/2022/08/T7t0n16Agz7NNLZxxT7NYaLgaGt30w.png?sign=a546e2da05130f45a683b9411d1562ad&t=6acd0400

3、参数和函数

https://file.lulublog.cn/images/3/2022/08/Wwwn7E31wKVQwWnWPhXQ2Cz7P2pC7m.png?sign=24a6a0a80ab3fe0eb294c6394e8d6f25&t=6acd0400

注:回调函数中返回的参数含义如下

  • indexArr是当前选中的索引数组 如[0,0,1] 代表有三个轮子 选中的数据是第一个轮子的第0个数据、第二个轮子的第0个数据、第三个轮子的第1个数据

  • data是当前选中的json数据 如[{id:'1',value:'hello'},{id:'2',value:'world'}]

功能函数:

https://file.lulublog.cn/images/3/2022/08/bI7sWf478IlIuL7w8nwN4IccwwWCyc.png?sign=9203e240e3274774fc91afe314182eaf&t=6acd0400

注:功能函数中需要传递的参数含义如下

  • sliderIndex 代表的是要修改的轮子的索引

  • posIndex 代表位置索引

功能函数demo:

https://file.lulublog.cn/images/3/2022/08/jd47sxyydUSHRhfrMi4dkQKZkodr43.png?sign=63b116490df1f5034bf4af8211ea9c3f&t=6acd0400

4、代码下载

打赏

×

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开微信扫一扫,即可进行扫码打赏哦