小程序弹框的一些总结

小程序弹框的一些总结

弹框的一些基本布局

1. 基本布局

<view class="panel-mask"><view class="panel-content">内容区域</view>
</view>

2. 样式
   fixed布局：(撑满整个背景)

.panel-mask {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 50%);}

absolute布局： (设置内容的样式, 重点是设置 height 所占百分比)

.panel-content {position: absolute;bottom: 0;left: 0;z-index: 11;width: 100%;height: 89%;padding: 0 30rpx;background: #fff;box-sizing: border-box;
}

不同机型，内容过多，如何合理的设置滚动区间

此处是个技术点：

1. 最外层盒子， 设置 百分比高度。这样就不用考虑机型了 (上面代码有)
2. 滚动的区域动态设置高度

   show: {type: Boolean,value: false,observer(val) {if (val) {const query = this.createSelectorQuery();query.select('.panel-content').boundingClientRect();query.select('.panel-header').boundingClientRect();query.select('.m-button-wrap').boundingClientRect();query.exec((res) => {this.setData({datailHeight: res[0].height - res[1].height - res[2].height,});});}},},
   

<view style="height: {{datailHeight}}px; overflow-y: scroll">内容区域</view>

底部按钮的设置

flex 和 fixed 结合

position: fixed;bottom: 0;display: flex;width: 100%;height: 108rpx;padding-bottom: env(safe-area-inset-bottom);font-size: 30rpx;font-weight: 500;color: #fff;background-color: #fff;border-radius: 39rpx;align-items: center;justify-content: center;

正常页面，底部固定按钮，对于不同机型该怎么设置内容区域距离底部的距离

设置一个空标签的高度占位，然后动态设置安全距离

<view class="ipx-inner-padding" />.ipx-inner-padding {height: 152rpx;padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box;
}