分享、交流、傳播
- 首頁
- 網(wǎng)站建設
輕松建站 服務到位為客戶提供一體化網(wǎng)站設計服務
- 小程序開發(fā)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務、全程售后服務、無憂備案
- 產(chǎn)品與服務
- 資訊
- 關于我們
輕松建站 服務到位為客戶提供一體化網(wǎng)站設計服務
小程序開發(fā)全功能小程序商城、開發(fā)定制服務、全程售后服務、無憂備案
今天開發(fā)時小程序會員登錄彈出層時，需要對應屏幕絕對居中對齊，一時腦抽，寫出了個BUG代碼。
見下圖：
點擊授權登錄時，需要彈出登錄層絕對居中對齊，然后自己使用了代碼如下：
wxml:
<view class="login-box" style="background-image: url(../../image/auth-default.png);background-size: 100% 100%;" hidden='{{loginflag}}'>
<view class="btn-list">
<view class="btn-close" bindtap="close">
關閉
view>
<view class="btn-login">
登錄
view>
view>
view>
<view class='mask' hidden='{{maskFlag}}'>view>
wxss:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
background: rgba(0, 0, 0, 0.6);
overflow: hidden;
z-index: 9998;
}
.login-box {
width: 650rpx;
height: 700rpx;
position: absolute;
left: 50rpx;
top: 50%;
margin-top: -350rpx;
z-index: 9999;
}
.btn-list {
position: absolute;
left: 0;
top: 550rpx;
display: flex;
justify-content: center;
width: 100%;
}
.btn-close {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 30rpx;
border: 1px solid #999;
color: #666;
}
.btn-login {
width: 30%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 30rpx;
margin-left: 30rpx;
background-color: #FF0000 !important;
color: #FFFFFF;
}
隨手使用了position: absolute;定位代碼，這在底層元素不太高的情況下是沒問題，但是由于底層元素比較高，這樣去點擊授權登錄的時候，彈出層是這樣效果的：
一下子感覺和自己設想的不一樣了，以為是CSS沖突，查了好久找不到原因，也不能因為這樣而采用JS去控制吧，于是去CSDN查了一下資料，然后查到了這個內容：
汗，內容鎖住了，這，好吧，還是自己研究吧。最后所有代碼看完，看到了一個隨手代碼position: absolute; 原來定位寫錯了，立即把參數(shù)改回來，position: fixed;，這個功能就不解釋了，資料也很多，只要改成這樣即可：
.login-box {
width: 650rpx;
height: 700rpx;
position: fixed;
left: 50rpx;
top: 50%;
margin-top: -350rpx;
z-index: 9999;
}
本來不想寫這篇文章的，但是CSDN內容竟然加鎖了，這本沒什么技術性的。好吧，就花半個鐘寫下這個文章，權當警示自己寫代碼時需緊慎再緊慎。
