雷林鹏分享：小程序自定义类似于选择器弹框
在开发小程序时，隐藏和显示是我们用的比较多的一种，但是就简简单单的显示隐藏，有的时候觉得太low，所以分享一个类似于城市选择器那种从下到上的那种弹框；
这中间就要用到小程序动画Animation
已经是写好的小demo；可以直接拿过来使用；
.wxml
<buttonbindtap="showModel">弹框显示</button>
<!--弹框-->
<!--渐深的背景层-->
<viewclass='{{bg}}'catchtap="hidden"style="visibility:{{backgroundVisible?'visible':'hidden'}};z-index:30"></view>
<!--底部弹出层-->
<viewclass="element-wrapper"animation="{{animation}}"style="visibility:{{show?'visible':'hidden'}}">
<viewclass="specifibox"style="padding-bottom:{{isIphoneX?64:0}}rpx">
<viewclass="top_imgs">
<textcatchtap="hidden"class="del">隐藏</text>
</view>
<viewclass="specifibox_bottom">
<viewclass="box_li_parent">
<viewclass="box_li">
<viewclass="classNav">
<textclass="specification">型号</text>
</view>
<view>
<text>window10专业版</text>
</view>
</view>
</view>
</view>
</view>
</view>
.wxss如果想要改变弹框的高度需要在specifibox属性名中更改属性
.background{
background-color:rgba(0,0,0,0);
width:100vw;
height:100vh;
position:absolute;
top:0;
z-index:99;
}
.bg{
background:rgba(0,0,0,0.4);
width:100vw;
height:100vh;
position:absolute;
top:0;
transition-property:background-color;
transition-timing-function:ease;
transition-duration:1s;
transition-delay:0;
z-index:99;
}
.del{
width:72rpx;
height:28rpx;
position:absolute;
right:24rpx;
top:20rpx;
color:#fff;
}
.element-wrapper{
display:flex;
position:fixed;
left:0;
bottom:0;
width:750rpx;
height:920rpx;
z-index:888;
}
/*规格弹框*/
.specifibox{
width:750rpx;
height:920rpx;
background:#191919;
border-radius:20rpx20rpx0px0px;
position:absolute;
left:0;
bottom:0;
z-index:11;
}
.top_imgs{
display:flex;
position:relative;
margin-bottom:15rpx;
height:50rpx;
width:100%;
}
.box_li_parent{
height:770rpx;
overflow:auto;
}
.box_li{
display:flex;
flex-wrap:wrap;
margin-bottom:30rpx;
}
.box_li>view{
border:1pxsolidrgba(255,255,255,1);
border-radius:4rpx;
padding:9rpx18rpx8rpx19rpx;
margin-left:24rpx;
margin-top:20rpx;
display:flex;
justify-content:center;
align-items:center;
}
.box_li>view>text{
font-size:24rpx;
font-weight:400;
color:rgba(255,255,255,1);
}
.box_li>.classNav{
width:100%;
display:block;
margin-left:24rpx;
margin-top:0;
padding:0;
border-radius:0;
background:#191919;
border:none;
}
.box_li>.classNav>.specification{
font-size:30rpx;
font-weight:500;
color:rgba(255,255,255,1);
}
.boxs_1{
height:514rpx;
width:100%;
}
.js
varaction='';
varmoveY=200;
varanimation=animation=wx.createAnimation({
transformOrigin:"50%50%",
duration:400,
timingFunction:"ease",
delay:0
})
animation.translateY(moveY+'vh').step();
Page({
/**
*页面的初始数据
*/
data:{
animation:animation,
bg:'background',
backgroundVisible:false,
show:false,
isIphoneX:false
},
//隐藏弹窗浮层
hidden(e){
moveY=200;
action='hide';
animationEvents(this,moveY,action);
},
//规格按钮点击事件
showModel:function(e){
moveY=0;
action='show';
animationEvents(this,moveY,action);
},
})
//动画事件底部的弹出，背景层通过切换不同的class，添加一个transition的效果，使之有一个渐变的感觉。
functionanimationEvents(that,moveY,action){
that.animation=wx.createAnimation({
transformOrigin:"50%50%",
duration:400,
timingFunction:"ease",
delay:0
})
that.animation.translateY(moveY+'vh').step()
if(action=='show'){
that.setData({
animation:that.animation.export(),
show:true,
backgroundVisible:true,
bg:'bg',
disableScroll:'disableScroll'
});
}elseif(action=='hide'){
that.setData({
animation:that.animation.export(),
show:false,
backgroundVisible:false,
bg:'background',
disableScroll:''
});
}
}
(编辑：雷林鹏 来源：网络|侵删)
