1. 程式人生 > >微信小程式把玩(二十三)modal元件

微信小程式把玩(二十三)modal元件

這裡寫圖片描述

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

常用屬性:

這裡寫圖片描述

wxml

<!--監聽button點選事件-->
<button bindtap="listenerButton" type="primary">彈出modal</button>

<!--彈出框-->
<modal 
    title="退出應用"
     hidden="{{hiddenModal}}"
     confirm-text="再看看"
     cancel-text="退出"
     bindconfirm
="listenerConfirm" bindcancel="listenerCancel" >
您是否真的要退出應用 </modal>

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(){ // 頁面關閉 } })