原生JS实现移动端选择器插件

原生js实现移动端选择器插件

仓库地址

在线预览(记得将浏览器切换到手机模式)

预览

准备

首先在页面中引入css,js文件

每次需要弹出该组件时通过new一个实例来生成，代码如下:

var data = {1:{2:[3,4]}
}
var pickerView = new PickerView({bindElem: elem, // 绑定的元素,用于区别多个组件存在时回显区别，如果单个可以随意填某个元素data: data, // 说明：该参数必须符合json格式 且最里层是个数组，如上面的data变量所展示的[3,4]。title: '标题2', // 顶部标题文本 默认为“标题”leftText: '取消', // 头部左侧按钮文本 默认为‘取消’rightText: '确定', // 头部右侧按钮文本 默认为“确定”rightFn: function( selectArr ){  // 点击头部右侧按钮的回调函数，参数为一个数组，数组对应滚轮中每项对应的值}
});
字段介绍如上注释，滚轮的数量取决于你json嵌套的层数。如下：
var data = [1,2,3]

var data = {"小明家":["小明爸爸","小明妈妈","小明爷爷","小明奶奶","小明爸爸","小明妈妈","小明爷爷","小明奶奶"],"小红家":["小红爸爸","小红妈妈"]
}

案例

<!-- html -->
<button style="font-size:50px;" id="btn">按钮</button>
<div class="showText"></div>
//button标签是用来每次点击的时候打开组件
//div标签用来展示选择的内容//js// var data = 地级市json数据，过大 就不展示了var data = {"小明家":{"小明爸爸":[1,2,6,7,7,8,8,9,0,6,98,76,5],"小明妈妈":[3,4]},"小红家":{"小红爸爸":[5,6],"小红妈妈":[7,8]}
}
var btn = document.getElementById("btn");
btn.onclick = function(){var pickerView = new PickerView({bindElem: btn,data: data,title: '家庭',leftText: '取消',rightText: '确定',rightFn: function( selectArr ){console.log(selectArr,'selectarr');// 将家庭成员展示到showText类名的div中document.querySelector(".showText").innerText = selectArr.join("-");}});
}

说明：每次显示组件的时候都需要new一个实例，如上button标签每次被点击的时候都new一个。效果如下：

本文转载
原文地址 : https://segmentfault.com/a/1190000013366588

原生JS实现移动端选择器插件相关推荐

html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览准备首先在页面中 ...
原生js实现移动端选择器插件 H5
前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 仓库地址在线预览(记得将浏览器切换到手机模式) 预览 ...
原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
pc端html轮播带滑块,原生js实现移动端+pc端轮播插件
slide.js 原生js写的轮播兼容 pc+移动端插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
html 地址选择控件,原生js实现移动端省市区地址选择器插件
准备首先在页面中引入css,js文件每次需要弹出该组件时通过new一个实例来生成,代码如下: var data = { 1:{ 2:[3,4] } } var pickerView = new P ...
[原创首发] js手机移动端选择插件 mobile-select
mobile-select 这是一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等- 最新版本下载地址[202 ...
cupload怎么保存图片_原生js的图片上传插件cupload
插件描述:支持图片预览.像素限制.大小限制.多图上传.更新模式下页面初始化加载图片更新时间:2020-09-25 00:23:49 更新说明:添加删除时,同时删除服务器图片的功能,文档提供php ...

原生JS实现移动端选择器插件

原生js实现移动端选择器插件

准备

案例

原生JS实现移动端选择器插件相关推荐

最新文章

热门文章