弹出遮罩层弹窗组件

牛油的果

于 2023-05-19 18:10:58 发布

阅读量96

点赞数

分类专栏：微信小程序文章标签： javascript 开发语言微信小程序 css 前端

本文链接：https://blog.csdn.net/weixin_57633124/article/details/130770960

版权

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

10 篇文章 0 订阅

订阅专栏

一. 带蒙版弹出窗口

1. HTML页面

<view class="float-bg"  wx:if="{{isShow}}" >
  <view class="mid-bg">
    <image class="header_img" mode="aspectFill" src="../../images/tabbar_mine_alert_change.png" ></image>
    <view class="con-text">提交成功 , 等待处理</view>
    <view class="but-bg">
        <!-- <view class="cancel-button" bindtap="cancelClick">取消</view> -->
        <view class="commit-button" bindtap="commitClick">确定</view>
    </view>
  </view>
</view>

2. css页面

/*wxss */
.float-bg{
  position: fixed;
  width: 750rpx;
  height: 100%;
  background-color: #33333333;
  z-index: 99;
  top: 0;
}
.mid-bg{
  width: 500rpx;
  height: 300rpx;
  margin-left: 125rpx;
  margin-top:60%;
  background-color: white;
  border-radius: 20rpx;
}
.header_img{
  position: relative;
  width: 100rpx;
  height: 100rpx;
  left: 200rpx;
  top: -40rpx;
}
.con-text{
  width: 500rpx;
  height: 50rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333;
}
.but-bg{
  width: 500rpx;
  height: 80rpx;
  margin-top: 30rpx;
  display: flex;
}
/* .cancel-button{
  width: 130rpx;
  height: 70rpx;
  background-color: #AAA;
  line-height: 70rpx;
  text-align: center;
  font-size: 26rpx;
  color: white;
  border-radius: 10rpx;
  margin-left: 60rpx;
} */
.commit-button{
  width: 130rpx;
  height: 70rpx;
  background-color: #EE7532;
  line-height: 70rpx;
  text-align: center;
  font-size: 26rpx;
  color: white;
  border-radius: 10rpx;
  margin-left: 185rpx;
  margin-top: 10rpx;
}

3.js页面

//js文件
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow:true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    cancelClick:function (e) {
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('cancelclick', myEventDetail, myEventOption)
      this.setData({
        isShow:false
      })
    },
    commitClick:function (e) {
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('commitlclick', myEventDetail, myEventOption)
      this.setData({
        isShow:false
      })
      wx.switchTab({
        url: '/pages/TabarMinePage/TabbarMinePage',
      })
    },
    

  },
  
})

如有错误,请各位大佬不吝赐教~~