WeUI for 小程序dialog对话框

2018年10月18日 09:40 | 71次浏览 作者原创 版权保护

在平时开发微信小程序ui的时候,对话框的使用频率很高,本章节将介绍小程序dialog对话框组件。实现起来很简单,步骤如下:

一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录dialog以及文件dialog.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Dialog</view>
<view class="page__desc">对话框,采用小程序原生的modal</view>
</view><!--V型知识库原创 www.vxzsk.com-->
<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>


三、在根目录app.json配置文件中配置dialog文件路径,保存后会自动生成对应的js、css等文件

"pages/dialog/dialog",


四、dialog.wxss样式代码

/* pages/dialog/dialog.wxss */
page{
background-color: #FFFFFF;
}


五、dialog.js代码实现

Page({
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('用户点击确定')
}
}
});
}
});
/**V型知识库原创 www.vxzsk.com***/

上述两个js函数分别为dialog.wxml页面两个按钮绑定的函数,为dialog对话框的实现代码


六、预览效果


此文章本站原创,地址 https://www.vxzsk.com/1912.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程