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

wangbjun 发布于2019-08-26 11:48 / 2021人阅读

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

插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star ?

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

预览

准备

首先在页面中引入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 = {
    "小明家":["小明爸爸","小明妈妈","小明爷爷","小明奶奶","小明爸爸","小明妈妈","小明爷爷","小明奶奶"],
    "小红家":["小红爸爸","小红妈妈"]
}

案例

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一个。效果如下：

结尾

如有什么功能需要增加的，可在评论区留言，我尽量满足。如有什么疏忽或错误，希望您指出。我会尽早修改，以免误导他人。

GPU云服务器云服务器移动端js时间插件时间插件移动端移动端翻页插件原生js弹窗插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107608.html

库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

CatalpaFlat 2019-08-02 16:13 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

fengxiuping 2019-08-23 16:55 评论0 收藏0
原生js封装了一个插件集合(目前仅包含拖拽和创建自适应文本框插件，颜色选择器)

摘要：一个基于原生而封装的插件集合，目前包含创建自适应的文本输入框，拖拽支持移动端和端的插件，颜色选择器插件其它插件正在逐步添加中。在线创建自适应文本框。鄙人创建了一个群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码 ewplugins 一个基于原生js而封装的插件集合，目前包含创建自适应的文本输入框，拖拽（支持移动端和PC端）的插件，颜色选择器插件,其它插件正在逐...

cheng10 2019-08-29 18:37 评论0 收藏0