手机端选择弹框插件（有滑动效果）

一般小程序中都有对应的插件，但在h5中，需要通过swiper自己写插件。

一、引入文件

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.4/css/swiper.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.4/js/swiper.min.js"></script>

HTML结构

<!-- 选择框 -->
<input type="text" class="city" placeholder="选择城市" readonly="readonly">
<!-- 弹框 -->
<div class="select_box"></div>

JS

<script>
	//根据当前的屏幕大小，设置根元素的fontsize
   (function(doc,win,page_width,font_size){
        let docEl=doc.documentElement,
        resizeEvt='orientationchange'in window?'orientationchange':'resize',
        recalc=function(){
            let clientWidth=docEl.clientWidth;
            console.log(clientWidth,page_width,font_size);
            if(!clientWidth)return;
            docEl.style.fontSize=clientWidth>page_width?(font_size*2)+'px':font_size*(clientWidth/(page_width/2))+'px';
            console.log(docEl.style.fontSize);
        };
        if(!doc.addEventListener)return;
        win.addEventListener(resizeEvt,function(){
            recalc();
        },false);
        doc.addEventListener('DOMContentLoaded',function(){
            recalc();
        },false);
    })(document,window,750,50);

    function selectSwiper(obj){
        let _self=this;
        _self.el=$(obj.el);
        _self.selectSwiper=null;
        _self.swiperData={};
        _self.swiperData.mustSelect=obj.mustSelect||false;
        _self.swiperData.activeIndex=(typeof obj.activeIndex==='number'&&obj.activeIndex>=-1)?obj.activeIndex:-1;
        _self.swiperData.oldIndex=_self.swiperData.activeIndex;
        _self.swiperData.data=obj.data||[];
        _self.swiperData.okFun=obj.okFun;
        _self.swiperData.okFunUndefind=obj.okFunUndefind||function(){};
        _self.swiperData.closeFun=obj.closeFun||function(){};
        _self.swiperData.init=obj.init;
        let hgSelect=`
            <div class="select">
                <span class="close">取消</span>
                <span class="ok">确定</span>
                <div class="selectData">
                    <div class="swiper-container">
                        <div class="cloth"></div>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">请选择</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        _self.init=function(){
            _self.el.html(hgSelect);
            _self.el.addClass('click_no');
            _self.selectSwiper=new Swiper(obj.el+' .swiper-container',{
                direction:'vertical',
                slidesPerView:5,
                centeredSlides:true,
                slideToClickedSlide:true,
                onInit:function(swiper){
                    swiper.removeSlide(0);
                    let data=_self.swiperData.data;
                    let s=[];
                    s[0]='<div class="swiper-slide">请选择</div>';
                    for(i=0;i<data.length;i++){
                        s[i+1]='<div class="swiper-slide">'+data[i]+'</div>';
                    }
                    swiper.appendSlide(s);
                    _self.swiperData.init(_self.swiperData.activeIndex);
                },
                onSlideChangeEnd:function(swiper){
                    _self.swiperData.activeIndex=swiper.activeIndex-1;
                },
            });
            _self.el.find('.ok').on('click',_self.okSelectSwiper);
            _self.el.find('.close').on('click',function(){
                _self.swiperData.activeIndex=_self.swiperData.oldIndex;
                _self.swiperData.closeFun();_self.closeSelectSwiper();
            });
            _self.el.on('click',function(){
                _self.el.find('.close').trigger('click');});
                $('.select').on('click',function(e){
                    e.stopPropagation();
            });
        };
        _self.openSelectSwiper=function(){
            let _self=this;
            _self.el.addClass('yes');
            _self.selectSwiper.update();
            _self.selectSwiper.slideTo(_self.swiperData.activeIndex+1,0);
        };
        _self.okSelectSwiper=function(){
            if(_self.swiperData.mustSelect&&_self.swiperData.activeIndex===-1){
                _self.swiperData.okFunUndefind();
            }else{
                _self.swiperData.okFun(_self.swiperData.activeIndex);
                _self.swiperData.oldIndex=_self.swiperData.activeIndex;
                _self.closeSelectSwiper();
            }
        };
        _self.closeSelectSwiper=function(){
            _self.el.removeClass('yes');
        };
        _self.init();
    }

    $(function(){
    	根据上面的方法实例化一个对象
        let citySelect = new selectSwiper({
            el:'.select_box',
            data:['北京','南京','上海','天津','广东','苏州','杭州','郑州','青岛'],
            init:function(index){
                if(index!==-1){
                    $('.city').val(this.data[index]);
                }
            },
            okFunUndefind:function(){
                alert('必须选择一项');
                return false;
            },
            okFun:function(index){
                console.log(index);
                $('.city').val(this.data[index]);
            },
            closeFun:function(){
                console.log('取消');
            },
        });
        $('.city').on('click',function(){
            citySelect.openSelectSwiper();
        });
    })
</script>

CSS

html,body{
   margin:0;
   padding:0;
   font-family:微软雅黑 regular,微软雅黑;
   font-size:.14rem;
   color:#333;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none
}
ul,li{
   list-style:none;
   padding:0
}
a{
   text-decoration:none;
   color:#333
}
.w750{
   max-width:750px;
   margin:0 auto;
   overflow:hidden;
   background-color:#f5f5f5
}
.swiper-container,.selectData{
   height:2.5rem
}
.swiper-slide{
   height:.7rem;
   line-height:.7rem;
   font-size:.3rem;
   color:#ccc
}
.swiper-slide:first-child{
   color:#b7babf
}
.swiper-slide-prev,.swiper-slide-next{
   font-size:.35rem;
   color:#898b8f
}
.swiper-slide-active{
   font-size:.4rem;
   color:#191919
}
@keyframes fadeInUp1{
   100%{bottom:0}
}
.select_box{
   display:none;
   position:fixed;
   left:0;
   top:0;
   right:0;
   bottom:0;
   background-color:rgba(0,0,0,.5);
   -webkit-transition:all .5s;
   -moz-transition:all .5s;
   -ms-transition:all .5s;
   -o-transition:all .5s;
   transition:all .5s
}
.select_box.yes{
   display:block
}
.select_box .select{
   height:3.5rem;
   overflow:auto;
   text-align:center;
   padding:.8rem .1rem .2rem;
   position:absolute;
   left:0;
   right:0;
   bottom:-100%;
   background-color:#fff
}
.select_box.yes .select{
   animation:fadeInUp1 .3s ease-out;
   animation-fill-mode:forwards
}
.select_box.yes .select .close,.select_box.yes .select .ok{
   color:#333;
   font-size:.32rem;
   position:absolute;
   top:.2rem
}
.select_box.yes .select .close{
   left:.2rem
}
.select_box.yes .select .ok{
   right:.2rem
}
.select_box.yes .select .cloth{
   position:absolute;
   height:.625rem;
   top:1rem;
   left:0;
   right:0;
   background-color:rgba(0,0,0,.05)
}