微信小程序 modal彈框組件詳解

更新時(shí)間：2016年10月27日 09:55:25 投稿：lqh

這篇文章主要介紹了微信小程序 modal彈框組件詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例,需要的朋友可以參考下

微信小程序 modal：

這里對(duì)微信小程序中 modal組件進(jìn)行詳細(xì)解析，我想開(kāi)發(fā)微信小程序的小伙伴可以用到，這里小編就記錄下modal的知識(shí)要點(diǎn)。

modal

modal類(lèi)似于javascript中的confirm彈框，默認(rèn)情況下是一個(gè)帶有確認(rèn)取消的彈框，不過(guò)點(diǎn)擊取消后彈框不會(huì)自動(dòng)隱藏，需要通過(guò)觸發(fā)事件調(diào)用函數(shù)來(lái)控制hidden屬性。

官方文檔

.wxml

<modal hidden="{{hidden}}" title="這里是title" confirm-text="自定義確定按鈕" cancel-text="自定義取消按鈕" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
  這是對(duì)話框的內(nèi)容。
</modal>

.js

Page({
  data:{
    hidden:false,
    nocancel:false
  },
  cancel: function(){
    this.setData({
       hidden: true
    });
  },
  confirm: function(){
    this.setData({
       nocancel: !this.data.nocancel
    });  
    console.log("clicked confirm");
  }
})

運(yùn)行效果

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

Servlet3.0與純javascript通過(guò)Ajax交互的實(shí)例詳解
Servlet與純javascript通過(guò)Ajax交互,對(duì)于很多人來(lái)說(shuō)應(yīng)該很簡(jiǎn)單。不過(guò)還是寫(xiě)寫(xiě)，方便Ajax學(xué)習(xí)的后來(lái)者
2018-03-03
微信小程序頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
這篇文章主要介紹了微信小程序頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下
2017-03-03
微信小程序 wxapp畫(huà)布 canvas詳細(xì)介紹
這篇文章主要介紹了微信小程序 wxapp畫(huà)布 canvas的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)（一）
這篇文章主要介紹了微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JavaScript國(guó)際化API格式化數(shù)據(jù)Intl.NumberFormat使用講解
這篇文章主要為大家介紹了JavaScript國(guó)際化API格式化數(shù)據(jù)Intl.NumberFormat使用講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例
這篇文章主要為大家介紹了JS數(shù)據(jù)分析數(shù)據(jù)去重及參數(shù)序列化示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JS前端常見(jiàn)的競(jìng)態(tài)問(wèn)題解決方法詳解
這篇文章主要為大家介紹了JS前端常見(jiàn)的競(jìng)態(tài)問(wèn)題解決方法詳解，閱讀完本文，你將會(huì)知道：什么是競(jìng)態(tài)問(wèn)題；通常出現(xiàn)在哪些場(chǎng)景；解決競(jìng)態(tài)問(wèn)題有哪些方法，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪的相關(guān)資料
2022-08-08
reduce探索lodash.reduce實(shí)現(xiàn)原理解析
這篇文章主要為大家介紹了reduce探索lodash.reduce實(shí)現(xiàn)原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
JavaScript前端分頁(yè)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了JavaScript前端分頁(yè)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
徒手實(shí)現(xiàn)關(guān)于JavaScript的24+數(shù)組方法
數(shù)組是我們?nèi)粘９ぷ髦杏玫淖铑l繁的一類(lèi)數(shù)據(jù)結(jié)構(gòu)，能幫助我們解決許多問(wèn)題，而其本身也包含接近33個(gè)之多的方法，做了一個(gè)腦圖分類(lèi)如下，熟練使用數(shù)組的你，是否想知道他們內(nèi)部的實(shí)現(xiàn)原理呢？接下來(lái)小編就帶大家進(jìn)入主題，希望能幫助到你
2021-09-09