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

原生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 = {
    "小明家":["小明爸爸","小明媽媽","小明爺爺","小明奶奶","小明爸爸","小明媽媽","小明爺爺","小明奶奶"],
    "小紅家":["小紅爸爸","小紅媽媽"]
}

案例

<!-- 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一個。效果以下：

結尾

若有什麼功能須要增長的，可在評論區留言，我儘可能知足。若有什麼疏忽或錯誤，但願您指出。我會盡早修改，以避免誤導他人。