1. 程式人生 > >微信小程式--官方文件補充【操作反饋】--modal元件

微信小程式--官方文件補充【操作反饋】--modal元件

這裡寫圖片描述

modal彈出框常用在提示一些資訊比如:退出應用,清楚快取,修改資料提交時一些提示等等。

常用屬性:

這裡寫圖片描述

wxml

<!--監聽button點選事件--><buttonbindtap="listenerButton"type="primary">彈出modal</button><!--彈出框--><modaltitle="退出應用"hidden="{{hiddenModal}}"confirm-text="再看看"cancel-text="退出"bindconfirm="listenerConfirm"bindcancel="listenerCancel"
>
您是否真的要退出應用 </modal>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

js

Page({
  data:{
    // text:"這是一個頁面"
    hiddenModal: true
  },

  listenerButton:function() {
      this.setData({
          hiddenModal: !this.data.hiddenModal
      })
  },

  listenerConfirm:function() {
      this.setData({
          hiddenModal: true
}) }, listenerCancel:function() { this.setData({ hiddenModal: true }) }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的引數 }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function
(){
// 頁面關閉 } })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40