小程序弹框的一些总结

小程序弹框的一些总结

弹框的一些基本布局

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;
}