微信小程序自定義對話框dialog

微信小程序自定義對話框dialog

簡介

和用戶交互，提示用戶，讓用戶選擇
界面：

第一個圖片代碼

wxml

<button bindtap="bt1" class="button">對話框1</button>
<modal  hidden="{{!hiddenmodal}}" title="掃描結果" bindconfirm="modalCancle" no-cancel="false" confirmText="取消">
  <view class="modal">
    <image class="image" src="../images/38.png"></image>
    <text class="text">文字1</text>
    </view>
  </modal>

js

data: {
    hiddenmodal: false,
    
  },
  //對話框1按鈕
  bt1: function(e) {
    let that = this
    that.setData({
      hiddenmodal: true,
    })
  },
  //取消1
  modalCancle: function (e) {
    let that = this
    that.setData({
      hiddenmodal: false,
    })
  },

wxss

.modal{
  display: flex;
  align-items: center;
  justify-content: center;
}
.button{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.image{
  width: 80rpx;
  height: 80rpx
}
.text{
  margin-left: 30rpx;
}

第二個圖片代碼

wxml

<button bindtap="bt2" class="button">對話框2</button>
<action-sheet hidden="{{!hidden_actionSheet}}" bindchange="actionSheetChange">

    <action-sheet-item class='item'>
      <image class="image" src="../images/38.png"></image>
      <text class="text">文字1</text>
    </action-sheet-item>
    <action-sheet-item class='item'>
      <image class="image" src="../images/38.png"></image>
      <text class="text">文字2</text>
    </action-sheet-item>
    <!-- 取消按鈕可以不用 -->
    <action-sheet-cancel class='cancel' >取消</action-sheet-cancel>
  </action-sheet>

js

data: {
    
    hidden_actionSheet: false,
  },
  //對話框2按鈕
  bt2: function(e) {
    let that = this
    
    that.setData({
      hidden_actionSheet: true,
    })
  },
  // 底下的取消
  actionSheetChange: function (e) {
    this.setData({
      hidden_actionSheet: false
    })
  },

wxss

.button{
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.image{
  width: 80rpx;
  height: 80rpx
}
.text{
  margin-left: 30rpx;
}

.item{
  display: flex;
  align-items: center;
  justify-content: center;
}

第三張圖片（wifi列表）

需要wifi列表的可以看鏈接：