源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

微信小程序使用modal组件弹出对话框功能示例

  • 时间:2021-06-19 00:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序使用modal组件弹出对话框功能示例
本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考,具体如下: 1、效果展示 [img]http://files.jb51.net/file_images/article/201711/20171129151107600.gif?20171029151128[/img] 2、关键代码 ①、index.wxml
<view>提示:{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
 <modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal对话框</modal>
</view>

②、index.js
Page({
 data:{
  // text:"这是一个页面"
  tip:'',
  buttonDisabled:false,
  modalHidden:true,
  show:false
 },
 showModal:function(){
  this.setData({
   modalHidden:!this.data.modalHidden
  })
 },
 modalBindaconfirm:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   show:!this.data.show,
   tip:'您点击了【确认】按钮!',
   buttonDisabled:!this.data.buttonDisabled
  })
 },
 modalBindcancel:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   tip:'您点击了【取消】按钮!'
  })
 }
})

③、完整实例代码点击此处[url=http://xiazai.jb51.net/201711/yuanma/wxapp_modal(jb51.net).rar][b]本站下载[/b][/url]。 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部