1. 消息提示框(Toast):
<view>
<button class="weui-btn" bindtap="showToast">显示消息</button>
<toast hidden="{{!toastHidden}}">提示消息</toast>
</view>
在相应的 JS 文件中,需要定义 showToast 函数来显示消息提示:
Page({
data: {
toastHidden: true,
},
showToast: function () {
this.setData({
toastHidden: false,
});
// 3秒后隐藏消息提示
setTimeout(() => {
this.setData({
toastHidden: true,
});
}, 3000);
},
});
2. 对话框(Dialog):
<view>
<button class="weui-btn" bindtap="showDialog">显示对话框</button>
<dialog hidden="{{!dialogHidden}}" bindcancel="hideDialog" bindconfirm="confirmDialog">
<view>这是一个对话框</view>
</dialog>
</view>
在相应的 JS 文件中,需要定义 showDialog 函数来显示对话框,并定义 hideDialog 和 confirmDialog 函数来处理取消和确认操作:
Page({
data: {
dialogHidden: true,
},
showDialog: function () {
this.setData({
dialogHidden: false,
});
},
hideDialog: function () {
this.setData({
dialogHidden: true,
});
},
confirmDialog: function () {
console.log('用户点击了确认');
this.setData({
dialogHidden: true,
});
},
});
这是一些 WeUI 弹窗组件的简单用法示例。你可以根据实际需求和 WeUI 的文档进一步定制和使用不同类型的弹窗组件,以满足项目的需求。
转载请注明出处:http://www.zyzy.cn/article/detail/1334/微信小程序