微信小程序自定义带图片的弹窗组件

现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：

代码如下：

modal.wxml

现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：

代码如下：

modal.wxml

确定要退圈吗？ 狠心离开 回心转意

modal.wxss:

/* 遮罩层 */

.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.5;
}

/* 弹出层 */

.modalDlg {
width: 67%;
position: fixed;
top: 35%;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.flex-around{
display: flex;
justify-content: space-around;
align-items: center;
}
/* 弹出层里面的图片 */

.modalDlg image {
width: 248rpx;
height: 212rpx;
margin: 30rpx auto 0 auto;
}

/* 弹出层里面的按钮 */

.btn {
width: 180rpx;
height: 64rpx;
background: #44b549;
line-height: 64rpx;
text-align: center;
color: #fff;
font-size: 29rpx;
margin: 20rpx auto;
border-radius: 100rpx;
}

.confirm {
background: linear-gradient(143deg, rgba(246, 61, 82, 1) 0%, rgba(255, 151, 115, 1) 100%);
}
.cancel{
background: linear-gradient(143deg, rgba(246, 61, 82, 1) 0%, rgba(255, 151, 115, 1) 100%);
}
/* 弹出层里面的文字 */

.test {
width: 100%;
text-align: center;
font-size: 36rpx;
margin: 20rpx auto;
color: #333;
}

modal.js:

// longbing_card/components/modal/modal.js
Component({
/**

• 组件的属性列表
  */
  properties: {
  //接收页面参数
  showModal: {
  type: null
  }
  },

/**

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

/**

• 组件的方法列表
  */
  methods: {
  // 禁止屏幕滚动
  preventTouchMove: function() {},
  // 狠心离开
  confirm: function() {
  this.setData({
  showModal: false
  })
  },
  // 回心转意
  cancel: function() {
  this.setData({
  showModal: false
  })
  }
  }
  })

页面wxml:
点击弹窗

页面js:

data:{
showModal: false, //弹窗
}
// 点击按钮触发弹窗
toMore: function() {
this.setData({
showModal: true
})
},
好了，基本的就是这样。