直播平台软件开发，弹出半角遮罩层

直播平台软件开发，弹出半角遮罩层

基础代码：

wxml

 

1

<br><!--pages/index/components/buy/index.wxml--><br><view class="box" ><br>  <view class="empty-box" bindtap="hideModal" id="empty-box"></view><br>  <scroll-view scroll-y style="max-height:80vh;"><br>    <view class="content" style="transform:translateY({{translateY}}px);" animation="{{animate}}"><br>      <!-- boll --><br> <view style="height: 700rpx;"></view><br>   <br> <br>      <!-- 按钮 --><br>      <view class="button" bindtap="confirm"><br>        <view>确认</view><br>      </view><br> <br>    </view><br>  </scroll-view><br></view>

​

css

 

1

<br>/* pages/index/components/buy/index.wxss */<br> <br>.flex {<br>  display: flex;<br>  align-items: center;<br>}<br> <br>.box {<br>  position: fixed;<br>  top: 0;<br>  left: 0;<br>  right: 0;<br>  bottom: 0;<br>  z-index: 1000;<br>  width: 100vw;<br>  height: 100vh;<br>  background: rgba(0, 0, 0, 0.5);<br>  display: flex;<br>  flex-direction: column;<br>}<br> <br>.empty-box {<br>  flex: 1;<br>  <br>}<br> <br>/* 内容视图 */<br> <br>.content {<br>  width: 100vw;<br>  background: rgba(255, 255, 255, 1);<br>  opacity: 1;<br>  border-radius: 20px 20px 0px 0px;<br>  z-index: 1001;<br>}<br> <br>/* 头部 */<br> <br>.header {<br>  position: relative;<br>  height: 80rpx;<br>  width: 100vw;<br>}<br> <br>.header > view {<br>  position: absolute;<br>  top: 26rpx;<br>  left: calc(50vw - 30rpx);<br>  width: 60rpx;<br>  height: 10rpx;<br>  background: rgba(161, 166, 175, 1);<br>  opacity: 0.6;<br>  border-radius: 6rpx;<br>}<br> <br>/* 快递 */<br> <br>.item {<br>  display: flex;<br>  align-items: center;<br>  justify-content: space-between;<br>  width: calc(100vw - 80rpx);<br>  padding: 0 40rpx;<br>  height: 100rpx;<br>  background: rgba(255, 255, 255, 1);<br>  opacity: 1;<br>}<br> <br>.item-no-selected {<br>  width: 36rpx;<br>  height: 36rpx;<br>  background: rgba(255, 255, 255, 1);<br>  border: 2rpx solid rgba(112, 112, 112, 1);<br>  border-radius: 50%;<br>  opacity: 0.5;<br>}<br> <br>.item-selected {<br>  width: 40rpx;<br>  height: 40rpx;<br>}<br> <br>/* 按钮 */<br> <br>.button {<br>  width: 100vw;<br>  padding: 80rpx 40rpx 20rpx 40rpx;<br>}<br> <br>.button >view {<br>  width: calc(100% - 80rpx);<br>  height: 98rpx;<br>  border-radius: 50rpx;<br>  line-height: 98rpx;<br>  text-align: center;<br>  font-size: 32rpx;<br>  font-family: PingFang SC;<br>  font-weight: bold;<br>  color: rgba(255, 255, 255, 1);<br>  background: rgba(237, 58, 74, 1);<br>  opacity: 1;<br>}

 

实现点击显示

上面的是基础代码，方便大家快速复制粘贴😄，接下来通过按钮展示弹出遮罩层

新建按钮

 

1	<br> <view  style="width: 190rpx;height: 70rpx;margin-right: 5rpx;margin-left: 5rpx;justify-content: center;display: flex;flex-direction: row;align-items: center;border-radius: 10rpx;color: white;" bindtap="show_hideModal">获取授权码</view>

 

新建js事件：

 

1	<br>show_hideModal:function(){<br>  let that=this;<br>  that.setData({<br>    hideModal:true<br>  })<br>}

 

以上就是 直播平台软件开发，弹出半角遮罩层，更多内容欢迎关注之后的文章