原生小程序中 自定义 实现从底部弹出内容框效果 根据不同的场景可以自行修改。
效果图如下：
<view bindtap="showmodify ==true">点我实现从底部弹出内容框</view>
------------------html---------------
<view wx:if="{{showmodify}}" class="mask" bindtap="closemask"></view>
这是从底部弹出的内容框 content
<view class="content {{showmodify?'rollslowly':''}}">
内容框的 头部
<view class="top">
<text class="modify_top_left" bindtap="closemask" data-name="cancel">取消</text>
<text class="modify_top_right" bindtap="closemask" data-name="confirm">完成</text>
</view>
<view class="bottom">这里写你的内容</view>
</view>
</view> 这是最外面的盒子 mask 主要是实现蒙层的效果
css 样式如下
/* 全屏遮罩层 */
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
z-index: 90;
}
/*内容框*/
.content {
width: 100%;
position: fixed;
bottom: -694rpx; /*定位让其隐藏起来*/
z-index: 91;
background: white;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
overflow: hidden;
height: 304rpx;
}
.rollslowly /*这个样式 主要是实现从底部缓慢 弹出的效果。使用过渡属性transition
{
/* 从-694rpx距离过渡到0rpx */
bottom: 0;
transition: bottom 0.5s ease;
}
/*下面是对内容框 顶部 样式的书写----小伙伴们自己可以根据自己的业务需求进行改动*/
.top {
height: 98rpx;
background:rgba(244,244,244,1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box;
}
.modify_top_left {
font-weight:400;
color:rgba(153,153,153,1);
}
.modify_top_right {
font-weight:500;
color:rgba(51,51,51,1);
}
js
data: {
showmodify:false //开始默认不展示 底部弹出内容框效果
}
closemask （） {
//点击蒙层要关闭 该弹出框
//点击取消 按钮 需要关闭
//点击 完成按钮 需要关闭
//这里我 传递参数 来区别点击的是取消 还是完成
var name = e.currentTarget.dataset.name
if (name =='cancel'){
点击了取消按钮
进行业务逻辑~~~~~~
}
if (name =='confirm') {
点击了完成按钮
进行业务逻辑~~~~~~
}
//最后 三者都执行 关闭操作功能
this.setData({
showmodify: !this.data.showmodify
})
}
