微信小程序电商系统省市区选择器（一）

摘要: 实现动画底部弹出悬浮框



###要点一：固定底部（position:fixed）

page {
position: relative;
height: 100%;
}

/*弹窗主体*/
.modal-content {
position: fixed;
bottom: -285px;
left: 0;
width: 100%;
height: 285px;
margin-top: 5px;
background: #fff;
z-index: 999;
}

要点二、位移动画translateY

var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
animation.translateY(-285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'show'
});

<view animation="{{animationData}}" class="modal-content">

position文档出处

动画文档出处

附上完整代码：

js代码

cascadePopup: function() {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
animation.translateY(-285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'show'
});
},
cascadeDismiss: function () {
this.animation.translateY(285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'hidden'
});
}

wxml代码

<view class="modal">
<view class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss"></view>
<view animation="{{animationData}}" class="modal-content">
<view class="modal-header">
<text class="modal-title">所在地区</text>
<text class="modal-close" bindtap="cascadeDismiss">X</text>
</view>
<view class="modal-body">
<text class="viewpager-title">请选择</text>
<view class="viewpager-divider"></view>
<view class="viewpager-listview">
<view>黑龙江</view>
<view>内蒙古</view>
<view>江苏</view>
<view>山东</view>
<view>安徽</view>
<view>浙江</view>
<view>福建</view>
</view>
</view>
</view>
</view>

wxss代码

page {
position: relative;
height: 100%;
}

/*弹窗主体*/
.modal-content {
position: fixed;
bottom: -285px;
left: 0;
width: 100%;
height: 285px;
/*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
margin-top: 5px;
background: #fff;
z-index: 999;
}

/*遮罩层*/
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 99;
}

/*弹窗头部*/
.modal-header {
margin: 2px 0;
font-size: 16px;
color: #666;
display: flex;
flex-direction: row;
justify-content: space-between;
line-height: 30px;
}

/*所在地区字样*/
.modal-title {
text-align: center;
width: 100%;
}

/*关闭按钮*/
.modal-close {
width: 20px;
}

.modal-body {
font-size: 14px;
}

/*每级地区标题*/
.viewpager-title {
padding: 0 10px;
color: #f03118;
line-height: 30px;
}

/*分隔线*/
.viewpager-divider {
width: 100%;
height: 1px;
background: #ccc;
}

/*每行地址*/
.viewpager-listview view{
line-height: 30px;
padding: 0 10px;
}

/*初始隐藏*/
.hidden {
display: none;
}

/*运行时显示*/
.show {
display: block;
}

源码下载：关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: huangxiujie85，QQ群: 581513218，微信: small_application，陆续还将推出更多作品。