ADADADADAD

微信小程序长页面中弹框如何居中[ 建站问答 ]

建站问答时间：2024-12-01 19:17:19

作者：文/会员上传

幻兽帕鲁孵化器制作在哪里

简介：

微信小程序长页面中弹框居中的案例：在对应的wxml文件中添加以下代码：<formbindsubmit="formSubmit"bindreset="formReset"><viewclass="commodity_screen"bindtap="hideModal2

以下为本文的正文内容，内容仅供参考！本站为公益性网站，复制本文以及下载DOC文档全部免费。

微信小程序长页面中弹框居中的案例：

在对应的wxml文件中添加以下代码：


<formbindsubmit="formSubmit"bindreset="formReset">
<viewclass="commodity_screen"bindtap="hideModal2"wx:if="{{!flag}}"></view>
<viewclass="wx-popup"style="margin:-{{windowHeight/2}}px00-{{windowWidth/2}}px"hidden="{{flag}}">
<viewclass='popup-container'>
<viewclass="wx-popup-title">添加备注</view>
<viewclass="wx-popup-con">
<viewclass="input">
<inputclass="inputRemark"name="nickName"value="{{nickName}}"placeholder="请输入备注"bindinput="remarkInput"/>
</view>
</view>
<viewclass="wx-popup-btn">
<buttonclass="btn-no"formType="reset"bindtap='hideModal2'>取消</button>
<buttonclass="btn-no"formType="submit">确认</button>
</view>
</view>
</view>
</form>

在对应的js文件中添加以下代码：


Page({
data:{
windowWidth:'',
windowHeight:'',
},
onShow:function(){
//获取系统信息:获取当前屏幕可见区域的宽和高
wx.getSystemInfo({
success:function(res){
that.setData({
"windowWidth":res.windowWidth,//可使用窗口宽度，单位px
"windowHeight":res.windowHeight,//可使用窗口高度，单位px
})
console.log(res.windowWidth,that.data.windowWidth);
console.log(res.windowHeight,that.data.windowHeight);
},
})
},
})

在对应的wxss文件中添加以下代码:


.wx-popup{
position:fixed;
z-index:2000;
}
.popup-container{
position:fixed;
left:50%;
top:50%;
width:80%;
max-width:600rpx;
background:#fff;
z-index:2000;
}