原生js實現移動端選擇器插件

wangbjun 發布于2019-08-26 11:48 / 2032人閱讀

原生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彈窗插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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