国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js實(shí)現(xiàn)移動(dòng)端選擇器插件

wangbjun / 2022人閱讀

原生js實(shí)現(xiàn)移動(dòng)端選擇器插件 前言

插件功能只滿足我司業(yè)務(wù)需求，如果希望有更多功能的，可在下方留言，我盡量擴(kuò)展！如果你有需要或者喜歡的話，可以給我github來(lái)個(gè)star ?

倉(cāng)庫(kù)地址
在線預(yù)覽(記得將瀏覽器切換到手機(jī)模式)
預(yù)覽

準(zhǔn)備

首先在頁(yè)面中引入css,js文件

每次需要彈出該組件時(shí)通過new一個(gè)實(shí)例來(lái)生成，代碼如下:

var data = {
    1:{
      2:[3,4]
    }
}
var pickerView = new PickerView({
    bindElem: elem, // 綁定的元素,用于區(qū)別多個(gè)組件存在時(shí)回顯區(qū)別，如果單個(gè)可以隨意填某個(gè)元素
    data: data, // 說(shuō)明：該參數(shù)必須符合json格式 且最里層是個(gè)數(shù)組，如上面的data變量所展示的[3,4]。
    title: "標(biāo)題2", // 頂部標(biāo)題文本 默認(rèn)為“標(biāo)題”
    leftText: "取消", // 頭部左側(cè)按鈕文本 默認(rèn)為‘取消’
    rightText: "確定", // 頭部右側(cè)按鈕文本 默認(rèn)為“確定”
    rightFn: function( selectArr ){  // 點(diǎn)擊頭部右側(cè)按鈕的回調(diào)函數(shù)，參數(shù)為一個(gè)數(shù)組，數(shù)組對(duì)應(yīng)滾輪中每項(xiàng)對(duì)應(yīng)的值

    }
});
字段介紹如上注釋，滾輪的數(shù)量取決于你json嵌套的層數(shù)。如下：
var data = [1,2,3]

var data = {
    "小明家":["小明爸爸","小明媽媽","小明爺爺","小明奶奶","小明爸爸","小明媽媽","小明爺爺","小明奶奶"],
    "小紅家":["小紅爸爸","小紅媽媽"]
}

案例 



button標(biāo)簽是用來(lái)每次點(diǎn)擊的時(shí)候打開組件
div標(biāo)簽用來(lái)展示選擇的內(nèi)容


//js

// var data = 地級(jí)市json數(shù)據(jù)，過大 就不展示了

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("-");
      }
  });
}
說(shuō)明： 每次顯示組件的時(shí)候都需要new一個(gè)實(shí)例，如上button標(biāo)簽每次被點(diǎn)擊的時(shí)候都new一個(gè)。效果如下：

結(jié)尾

如有什么功能需要增加的，可在評(píng)論區(qū)留言，我盡量滿足。如有什么疏忽或錯(cuò)誤，希望您指出。我會(huì)盡早修改，以免誤導(dǎo)他人。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/107608.html

相關(guān)文章

  • 庫(kù)&插件&框架&工具

    摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

    Codeing_ls 評(píng)論0 收藏0

  • 庫(kù)&插件&框架&工具

    摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

    xiaowugui666 評(píng)論0 收藏0

  • 原生js封裝了一個(gè)插件集合(目前僅包含拖拽和創(chuàng)建自適應(yīng)文本框插件，顏色選擇器)

    摘要：一個(gè)基于原生而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽支持移動(dòng)端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創(chuàng)建自適應(yīng)文本框。鄙人創(chuàng)建了一個(gè)群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼 ewplugins 一個(gè)基于原生js而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽（支持移動(dòng)端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    CatalpaFlat 評(píng)論0 收藏0

  • 原生js封裝了一個(gè)插件集合(目前僅包含拖拽和創(chuàng)建自適應(yīng)文本框插件，顏色選擇器)

    摘要：一個(gè)基于原生而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽支持移動(dòng)端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創(chuàng)建自適應(yīng)文本框。鄙人創(chuàng)建了一個(gè)群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼 ewplugins 一個(gè)基于原生js而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽（支持移動(dòng)端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    fengxiuping 評(píng)論0 收藏0

  • 原生js封裝了一個(gè)插件集合(目前僅包含拖拽和創(chuàng)建自適應(yīng)文本框插件，顏色選擇器)

    摘要：一個(gè)基于原生而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽支持移動(dòng)端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創(chuàng)建自適應(yīng)文本框。鄙人創(chuàng)建了一個(gè)群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼 ewplugins 一個(gè)基于原生js而封裝的插件集合，目前包含創(chuàng)建自適應(yīng)的文本輸入框，拖拽（支持移動(dòng)端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    cheng10 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<