select2.gif

需求來源

原生的select有很多樣式不能隨意改動，比如不能設置居中不生效，select框長度不能根據(jù)內(nèi)容自適應等。而且在ios端和安卓端顯示的樣式不統(tǒng)一。所以為了解決以上問題，基于swiper對select進行了優(yōu)化改進，改進后的樣式可以隨意設置，實現(xiàn)多端樣式統(tǒng)一。

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>

然后創(chuàng)建一個select大容器selectbL，然后在容器里面分別創(chuàng)建選項回顯容器select-xi，以及選項內(nèi)容容器display-none。當然，選項內(nèi)容容器默認是隱藏的，只有在觸發(fā)點擊選項的時候才會顯示出來。

<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后，需要初始化一下方法，這個方法就是構(gòu)造select選項的函數(shù)。

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

下面是部分構(gòu)造函數(shù)里面的方法，其中一個是確定的方法，另一個是取消的方法。至于完成選項后你有什么操作，都可以在這兩個方法中完成。

$('.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就完成了，好看，實用，可造性高。

select1.png