<view class=container class=zn-uploadimg> <button type=primarybindtap=showok>消息提示框</button> <button type=primarybindtap=modalcnt>模态弹窗</button> <button type=primarybindtap=actioncnt>操作菜单</button> </view>
1.消息提示——wx.showToast(OBJECT)
//show.js
//获取应用实例
var app = getApp()
Page({
showok:function() {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
}
})
2.模态弹窗——wx.showModal(OBJECT)
//show.js //获取应用实例 var app = getApp() Page({ modalcnt:function(){ wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } })
3.操作菜单——wx.showActionSheet(OBJECT)
//show.js //获取应用实例 var app = getApp() Page({ actioncnt:function(){ wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function(res) { console.log(res.tapIndex) }, fail: function(res) { console.log(res.errMsg) } }) } })
4.指定modal弹出
指定哪个modal,可以通过hidden属性来进行选择。
<!--show.wxml--> <view class=container class=zn-uploadimg> <button type=primarybindtap=modalinput>modal有输入框</button> </view> <modal hidden={{hiddenmodalput}} title=请输入验证码 confirm-text=提交 cancel-text=重置 bindcancel=cancel bindconfirm=confirm> <input type='text'placeholder=请输入内容 auto-focus/> </modal>
//show.js //获取应用实例 var app = getApp() Page({ data:{ hiddenmodalput:true, //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框 }, //点击按钮痰喘指定的hiddenmodalput弹出框 modalinput:function(){ this.setData({ hiddenmodalput: !this.data.hiddenmodalput }) }, //取消按钮 cancel: function(){ this.setData({ hiddenmodalput: true }); }, //确认 confirm: function(){ this.setData({ hiddenmodalput: true }) } })
相关推荐:
原文地址:https://www.jb51.cc/weapp/1202503.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。