关于前端:适配性强的移动端select选项框

需要起源

原生的 select 有很多款式不能随便改变，比方不能设置居中不失效，select 框长度不能依据内容自适应等。而且在 ios 端和安卓端显示的款式不对立。所以为了解决以上问题，基于 swiper 对 select 进行了优化改良，改良后的款式能够随便设置，实现多端款式对立。

html 源码

须要在 html 中引入须要依赖的 css 和 js

<link rel\="stylesheet" type\="text/css" href\="select/css/style.mobile.css" />  
<link rel\="stylesheet" type\="text/css" href\="select/css/swiper.min.css" />  
<script type\="text/javascript" src\="js/jquery-1.7.2.min.js"\></script\>  
<script type\="text/javascript" src\="select/js/swiper.min.js"\></script\>  
<script type\="text/javascript" src\="select/js/hSdrop.js"\></script\>

而后创立一个 select 大容器 selectbL，而后在容器外面别离创立选项回显容器 select-xi，以及选项内容容器 display-none。当然，选项内容容器默认是暗藏的，只有在触发点击选项的时候才会显示进去。

<div class\="selectbL"\>  
 <div class\="select-xi sele-bp"\>  
 <span\> 工夫 </span\>  
 <img src\="images/selectImg.png" class\="selectImg" />  
 </div\>  
 <div class\="display-none"\>  
 <div vid\="1"\>2020 年 10 月 10 日 </div\>  
 <div vid\="0"\>2020 年 10 月 11 日 </div\>  
 <div vid\="2"\>2020 年 10 月 12 日 </div\>  
 <div vid\="3"\>2020 年 10 月 13 日 </div\>  
 </div\>  
</div\>

js 源码

在你引入所有的 js 和 css 后，须要初始化一下办法，这个办法就是结构 select 选项的函数。

new hSdrop({els:'.sele-bp'})

上面是局部构造函数外面的办法，其中一个是确定的办法，另一个是勾销的办法。至于实现选项后你有什么操作，都能够在这两个办法中实现。

$('.select-moob .cancel,.select-moob-cover').click(function(e){$('.select-moob').remove();});
$('.select-moob .determine').click(function(e){$(el).children('span').text($('.sw-select .swiper-slide-active').html());
        $('.select-moob').remove();})

一个革新好的 select 就实现了，难看，实用，可造性高。