WEUI在微信小程序中的使用 |
项目框架的制作 |
栏目首页 |
weui基础组件 |
weui表单 |
weui 操作反馈相关 |
weui 导航 navbar 切换(类tab)使用教程 |
weui 搜索searchbar使用教程 |
当前阅读教程:小程序Weui在线教程 > weui Dialog对话框 使用教程 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: weui ActionSheet弹出式菜单 | 下一篇: weui Msg提示页 使用教程 |
confirm对话框 alert对话框 js代码 // pages/03caozuofankui/02-dialog.js Page({ /** * 页面的初始数据 */ data: { }, openConfirm: function () { wx.showModal({ title: '弹窗标题', content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内', confirmText: "主操作", cancelText: "辅助操作", success: function (res) { console.log(res); if (res.confirm) { console.log('用户点击主操作') } else { console.log('用户点击辅助操作') } } }); }, openAlert: function () { wx.showModal({ content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wxml代码 <view class="page"> <view class="page__hd"> <view class="page__title">Dialog</view> <view class="page__desc">对话框,采用小程序原生的modal</view> </view> <view class="page__bd"> <view class="weui-btn-area"> <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button> <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button> </view> </view> </view> |
|
上一篇: weui ActionSheet弹出式菜单 | 下一篇: weui Msg提示页 使用教程 |