微信小程序自定义弹窗2.0

最新推荐文章于 2024-03-11 14:38:21 发布

清音啊

最新推荐文章于 2024-03-11 14:38:21 发布

阅读量181

点赞数

分类专栏：微信小程序文章标签：小程序微信

本文链接：https://blog.csdn.net/qq_38839887/article/details/120769506

版权

微信小程序专栏收录该内容

30 篇文章 0 订阅

订阅专栏

wxml

<!-- 弹窗 -->
<view class="popup_view" wx:if="{{show_popup}}" catchtouchmove="return" bindtap="showPopup">
  <view class="popup" catchtap="aacc">
    
  </view>
</view>

wxss

.popup_view {
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  z-index: 9999999999;
  background:rgba(0,0,0,0.5);
  overflow:hidden;
}
.popup {
  width: 590rpx;
  margin:0 auto;
  margin-top: 270rpx;
  height: 840rpx;
  border-radius: 30rpx;
  background: #FFF;
  overflow: hidden;
}

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    show_popup:false,
  },
  showPopup:function(){
    this.setData({
      show_popup:!this.data.show_popup
    })
  },