小程序
小游戏
企业微信
微信支付
扫描小程序码分享
page-container这个组件怎么实现水平垂直居中？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
https://developers.weixin.qq.com/s/J1UimImo7jod
上面是官方提供的案例，如果你想在案例中实现垂直居中，去掉page-container里面包裹的第一层组件view（class = "detail-page"）的wxss属性：min-height即可。
原本min-height设置的是300px，但上下弹窗的白色区域明显小于300px，所以会导致看起来不是水平垂直居中的。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<page-container show customStyle="right: 0; left: 0; top: 0; bottom: 0; margin: auto;width: fit-content;height: fit-content;">
hello page-container
</page-container>
<view style="height: 100%; width: 100%;"> <page-container show="{{show}}" overlay='true' duration="{{duration}}" position="center" close-on-slide-down="true" custom-style="height:{{height}};width:{{width}};margin-left:{{marginLeft}};margin-top:{{marginTop}}; margin-right:25%; {{customStyle}}" overlay-style="background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);" bind:beforeenter="modelBeforeEnter"> <view id="pageContainerInner" style="height: 100%; width: 100%;"> <slot></slot> </view> </page-container> </view>
methods: { modelBeforeEnter(){ var query = wx.createSelectorQuery().in(this); query.select('#pageContainerInner').boundingClientRect(rect => { this.setData({ marginTop: `${(wx.getSystemInfoSync().windowHeight - rect.height) / 2}px`, marginLeft: `${( wx.getSystemInfoSync().windowWidth - rect.width) / 2}px` }) }).exec(); } }
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
https://developers.weixin.qq.com/s/J1UimImo7jod
上面是官方提供的案例，如果你想在案例中实现垂直居中，去掉page-container里面包裹的第一层组件view（class = "detail-page"）的wxss属性：min-height即可。
原本min-height设置的是300px，但上下弹窗的白色区域明显小于300px，所以会导致看起来不是水平垂直居中的。
<page-container show customStyle="right: 0; left: 0; top: 0; bottom: 0; margin: auto;width: fit-content;height: fit-content;">
hello page-container
</page-container>
<view style="height: 100%; width: 100%;"> <page-container show="{{show}}" overlay='true' duration="{{duration}}" position="center" close-on-slide-down="true" custom-style="height:{{height}};width:{{width}};margin-left:{{marginLeft}};margin-top:{{marginTop}}; margin-right:25%; {{customStyle}}" overlay-style="background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);" bind:beforeenter="modelBeforeEnter"> <view id="pageContainerInner" style="height: 100%; width: 100%;"> <slot></slot> </view> </page-container> </view>methods: { modelBeforeEnter(){ var query = wx.createSelectorQuery().in(this); query.select('#pageContainerInner').boundingClientRect(rect => { this.setData({ marginTop: `${(wx.getSystemInfoSync().windowHeight - rect.height) / 2}px`, marginLeft: `${( wx.getSystemInfoSync().windowWidth - rect.width) / 2}px` }) }).exec(); } }