half-screen-dialog.wxml 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Half Screen Dialog</view>
  4. <view class="page__desc">半屏弹窗,辅助完成当前页面任务时;提醒用户并引导用户的下一步操作;用户主动发起的任务时。</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="weui-btn-area">
  8. <button class="weui-btn" type="primary" bindtap="openTypeF">样式一</button>
  9. <button class="weui-btn" type="primary" bindtap="openTypeS">样式二</button>
  10. <button class="weui-btn" type="primary" bindtap="openTypeT">样式三</button>
  11. </view>
  12. <mp-halfScreenDialog show="{{typeF}}">
  13. <view slot="title">测试标题A</view>
  14. <view slot="desc">这是自定义描述区</view>
  15. <view slot="footer">
  16. <button type="default" class="weui-btn">按钮A</button>
  17. <button type="primary" class="weui-btn">按钮B</button>
  18. </view>
  19. </mp-halfScreenDialog>
  20. <mp-halfScreenDialog show="{{typeT}}" closabled="{{false}}">
  21. <view slot="title">测试标题A</view>
  22. <view slot="desc">这是自定义描述区</view>
  23. <view slot="footer">
  24. <button type="default" class="weui-btn">按钮A</button>
  25. <button type="primary" class="weui-btn">按钮B</button>
  26. </view>
  27. </mp-halfScreenDialog>
  28. <mp-halfScreenDialog
  29. bindbuttontap="buttontap"
  30. show="{{typeS}}"
  31. maskClosable="{{false}}"
  32. title="测试标题B"
  33. subTitle="测试标题B的副标题"
  34. desc="辅助描述内容,可根据实际需要安排"
  35. tips="辅助提示内容,可根据实际需要安排"
  36. buttons="{{buttons}}"
  37. ></mp-halfScreenDialog>
  38. </view>
  39. </view>