微信小程序の自定義彈窗

自定義彈框，話不多說先上效果圖~哈哈哈

 開始上代碼啦。

首先在 wxml 上寫蒙層 屬類modal-mask和彈框層 modal-dialog，此層又分爲三部分，title、content、footer 很經典的結構對不對！😄

<view class="modal-mask" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
  <view class="modal-title">{{title}}</view>
  <view class="modal-content">
    <view class='content-show-text'>
      <text>{{content}}</text>
    </view>
  </view>
  <view class="modal-footer">
    <view class="btn-cancel" bindtap="onCopy">複製</view>
    <view class="btn-confirm" bindtap="onConfirm">確定</view>
  </view>
</view>

再補上樣式，樣式很重要啦對於前端，很多功能都是通過樣式調出來的哈哈。樣式對應的class可根據自己的喜歡調個更看的樣式哦。

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

.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -180rpx 105rpx;
  border-radius: 36rpx;
}

.modal-title {
  padding-top: 50rpx;
  font-size: 38rpx;
  color: #1e1f23;
  text-align: center;
}

.modal-content {
  padding: 30rpx 32rpx;
  text-align: center;
}

.content-show-text {
  word-break: keep-all;
  word-wrap: break-word;
  font-size: 24rpx;
  color: #999ba1;
  line-height: 34rpx;
}

.content-copy {
  color: #797ec0;
  font-size: 30rpx;
  margin-top: 20rpx;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: 1px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}

.btn-cancel {
  width: 50%;
  color: #797ec0;
  text-align: center;
  border-right: 1px solid #dedede;
}

.btn-confirm {
  width: 50%;
  color: #ec5300;
  text-align: center;
}

最後三個function啦。當然要在 js 中的 data 加入三個屬性 showModal、title、content。

/**
* 頁面的初始數據
*/
data: {
    showModal: false,
    title: '這是自定義彈框標題',
    content: '這是彈框內容，也可以是其他控件'
}

/**
* 顯示彈框
*/
showModal: function() {
    this.setData({
        showModal: true
    })
},

/**
* 複製按鈕
*/
onCopy: function() {
    var that = this
    wx.setClipboardData({
        data: this.data.content,
        success: function(res) {
            that.setData({
                showModal: false
            })
        }
    })
},

/**
* 確定按鈕
*/
onConfirm: function() {
    this.setData({
        showModal: false
    })
}

這樣就可以實現自定義彈框啦，可以用來當作輸入密碼，提示錯誤，提示內容，其他表單輸入都是ok的，在modal-content中加入對應的控件就闊以啦。