<view>
<button class="weui-btn" bindtap="showHalfScreenDialog">显示半屏弹窗</button>
<half-screen-dialog
wx:if="{{showHalfScreenDialog}}"
bind:close="hideHalfScreenDialog"
bind:confirm="confirmHalfScreenDialog"
title="半屏弹窗标题"
>
<view>半屏弹窗内容</view>
</half-screen-dialog>
</view>
在相应的 JS 文件中,需要定义 showHalfScreenDialog 函数来显示半屏弹窗,并定义 hideHalfScreenDialog 和 confirmHalfScreenDialog 函数来处理关闭和确认操作:
Page({
data: {
showHalfScreenDialog: false,
},
showHalfScreenDialog: function () {
this.setData({
showHalfScreenDialog: true,
});
},
hideHalfScreenDialog: function () {
this.setData({
showHalfScreenDialog: false,
});
},
confirmHalfScreenDialog: function () {
console.log('用户点击了确认');
this.setData({
showHalfScreenDialog: false,
});
},
});
在上述示例中,当用户点击按钮时,调用 showHalfScreenDialog 函数显示半屏弹窗。half-screen-dialog 组件的 wx:if 属性用于控制是否显示半屏弹窗,bind:close 和 bind:confirm 事件用于监听关闭和确认操作,分别调用 hideHalfScreenDialog 和 confirmHalfScreenDialog 函数。
你可以根据实际需求定制半屏弹窗的标题、内容、样式等。这是一个简单的 WeUI 半屏弹窗组件的使用示例,你可以根据项目需求进行更进一步的定制。
转载请注明出处:http://www.zyzy.cn/article/detail/1337/微信小程序