<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端下拉框选择</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-appearance: none;
outline: none;
word-break: break-all;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
font-family: "PingFang SC-Medium,sans-serif", "Noto Sans CJK SC,sans-serif", Arial, "Microsoft YaHei";
font-size: 100px;
background-color: #f5f5f5;
}
body {
font-size: 62.5%;
height: 100%;
line-height: 1;
}
ul, ol, li {
list-style: none;
}
.testselect {
position: relative;
padding: 0.09rem 0.32rem;
display: -webkit-box;
display: box;
display: -moz-box;
overflow: hidden;
margin-top: 0.5rem;
border: 1px solid #d4d4d4;
}
.testselect label {
display: block;
width: 1.72rem;
height: 0.62rem;
line-height: 0.62rem;
font-size: 0.3rem;
color: #3e3e3e;
}
.testselect input {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
line-height: 0.62rem;
font-size: 0.3rem;
margin-left: -0.3rem;
}
.infor-unit {
position: absolute;
right: 0;
top: 0.4rem;
width: 0.46rem;
text-align: right;
}
.arrow-right {
display: inline-block;
position: absolute;
top: 50%;
right: 5.3rem;
content: ">";
vertical-align: middle;
width: 0.13rem;
height: 0.22rem;
background-position: -2.38rem -0.42rem;
background-size: 3.65rem 1.06rem;
margin-top: -0.11rem;
color: #999;
font-size: 0.49rem;
}
.chicon-clear{
font-size: 0.49rem;
color: #999;
font-style: normal;
margin-left: -.7rem;
}
.mask-layer {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2010;
background-color: rgba(0, 0, 0, 0.6);
}
.payment {
position: relative;
width: 100%;
height: 100%;
}
.payment-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.payment-title {
display: -webkit-box;
display: box;
display: -moz-box;
height: 0.9rem;
background-color: #f5f5f5;
}
.payment-title > a {
display: inline-block;
line-height: 0.9rem;
padding: 0 0.3rem;
font-size: 0.34rem;
color: #0066cc;
text-decoration: none;
}
.payment-title > h3 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
font-weight: bold;
text-align: center;
line-height: 0.9rem;
font-size: 0.36rem;
color: #111111;
}
.payment-list {
padding: 0.2rem 0 0.4rem;
height: 3.5rem;
/*居中改高*/
/*height: 7rem;*/
overflow: hidden;
}
.payment-list li {
text-align: center;
line-height: 0.9rem;
font-size: 0.32rem;
color: #666666;
}
.swiper-slide-active {
font-weight: bold;
font-size: 0.4rem;
color: #111111;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.payment-content-center{
width: 82%;
height: 62%;
background: #f3f3f3;
position: fixed;
top: 19%;
z-index: 22;
left: 50%;
margin-left: -41%;
font-size: .32rem;
color: #000;
text-align: center;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="testselect" id="app">
<label>门店</label>
<input v-model="selectVal" type="text" readonly="readonly" placeholder="请选择" v-on:click="selectDept"/>
<div class="clear" v-on:click="clearDepartment()" v-if="selectVal"><i class="chicon-clear">x</i></div>
<div class="infor-unit" v-else v-on:click="selectDept()"><i class="arrow-right">></i></div>
</div>
<article class="mask-layer" id="footer-select" style="display: none;">
<div class="payment"></div>
<div class="payment-content">
<!-- 默认是底部显示，可以把payment-content改成payment-content-center居中显示 -->
<div class="payment-title">
<a href="javascript:void(0);" class="close-btn fn-btn">取消</a>
<h3>门店</h3>
<a href="javascript:void(0);" class="confirm-btn fn-btn">确定</a>
</div>
<div class="payment-list swiper-container">
<ul class="swiper-wrapper" id="footer-tab-wapper"></ul>
</div>
</div>
</article>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.1.5/zepto.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.12/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/4.0.5/js/swiper.js"></script>
<script type="text/javascript">
var app = new Vue({
data: {
selectVal:'',//下拉选择的值
isRenderSel:false//是否渲染好了下拉框值
},
created: function() {
this.storeJson = [
"深圳1店",
"深圳2店",
"深圳3店",
"深圳4店",
"深圳5店",
"深圳6店",
"深圳7店",
"深圳8店",
"深圳9店",
"深圳10店",
"深圳11店",
"深圳12店",
"深圳13店",
"深圳14店",
"深圳15店",
"深圳16店",
"深圳17店",
"深圳18店",
"深圳19店",
"深圳20店",
"深圳21店",
"深圳22店",
"深圳23店",
"深圳24店",
"深圳25店"
]
},
mounted: function() {
console.log(this.storeJson.length);
},
methods: {
selectDept: function () {
var self = this;
self.showFooterTab(self.storeJson);
},
clearDepartment: function () {
var self = this;
self.selectVal = '';
},
showFooterTab: function(arr){
var me = this;
if(this.isRenderSel){
this.footerSwiper.slideTo(0);
this.footerTabEl.show();
}else{
var el = this.footerTabEl= $('#footer-select');
this.wrapperEl = $('#footer-tab-wapper');
if(arr && arr.length > 0){
this.wrapperEl.html("");
for(var i=0,j=arr.length; i<j; i++){
this.wrapperEl.append('<li class="swiper-slide">'+arr[i]+'</li>');
}
el.show();
}
this.footerSwiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 3,//底部参数用3,
spaceBetween: 0,
centeredSlides: true,
slideActiveClass : 'swiper-slide-active',
});
el.find('.close-btn').click(function(){
el.hide();
});
$('.payment').click(function(){
el.hide();//单击选择框其它部分也关闭
});
this.isRenderSel = true;
}
this.footerTabEl.find('.confirm-btn').off('click').click(function(){
var txt = me.wrapperEl.find('.swiper-slide-active').text();
me.selectVal = txt;
me.footerTabEl.hide();
})
}
},
watch: {}
}).$mount("#app")
</script>
</body>
</html>
