需要起源
原生的 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 就实现了,难看,实用,可造性高。