微信小程序之弹窗布局

效果:

如何实现呢?

首先我们创建个view

wxml代码:

复制代码
<view class="pop_root">
  <view class="pop_content">
    <view>授权登录</view>
    <button>授权登录</button>
  </view>
</view>

wxss代码:

复制代码
.pop_root{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0,0.6)
}

.pop_content{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  height: 300rpx;
}

很简单,全屏遮掩后加点透明度,跑一下看看效果吧。

相关推荐
此心光明事上练1 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me12 小时前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
gongzemin15 小时前
微信第三方平台的配置
微信·微信小程序·资讯
一念杂记21 小时前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
小白_ysf1 天前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid1 天前
微信小程序私密消息
微信小程序·小程序
kilito_011 天前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
二饭1 天前
微信小程序动态切换窗口主题色
微信小程序·小程序
白日依山尽yy1 天前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
新手小黑吖1 天前
vscode开发微信小程序
vscode·微信小程序