Half Screen Dialog半屏弹窗内部可以自定义吗
发布于 5 年前 作者 yongqin 2825 次浏览 来自 分享

本文主要解决了以下两个问题

1、weui如何引入

2、半屏弹窗如何使用

3、半屏弹窗是否支持内部自定义

如果对上面三个问题感兴趣可以继续阅读

Half Screen Dialog

半屏弹窗,辅助完成当前页面任务时;提醒用户并引导用户的下一步操作;用户主动发起的任务时。

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/half-screen-dialog.html

1

2

3

3

如何引入Weui,建议还是按照传统方式引入,今天在直播课中,就翻车了,

首先node npm xx,然后把里面的dist目录移出来。

官方文档

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html

参考社区帖子

https://developers.weixin.qq.com/community/develop/article/doc/000224381788e8e5bb89426f55e413

  1. 更新最新的 nightly 版开发者工具
  2. 在app.json里新增
  3. “useExtendedLib”: {
  4. “weui”: true
  5. }
  6. 在使用的页面json文件应用组件,比如在index.json里
  7. {
  8. “navigationStyle”:“custom”,
  9. “usingComponents”: {
  10. “mp-navigation-bar”:"/weui-miniprogram/navigation-bar/navigation-bar"
  11. }
  12. }
  13. wxml文件使用组件,比如在index.wxml里
  14. <mp-navigation-bar title=“首页”></mp-navigation-bar>
  15. 验证有效。

4

5

6

我把评论区大佬的代码片段提上来了,非常感谢。

https://developers.weixin.qq.com/s/yWl6plmy7ghb

相关代码我都放评论区域了,需要的话,可用自取。

4 回复

下面这份代码,可用自定义半屏弹窗内容,用到了weui的样式,但是没有按照组件模式使用

https://developers.weixin.qq.com/s/bJtwBlmD7ch3

用slot插槽 或者自己写一个就好了。。这个效果挺简单的。花了一会儿时间撸了个。

https://developers.weixin.qq.com/s/yWl6plmy7ghb

这份代码仅仅是按照官方文档将半屏弹窗正常展示

https://developers.weixin.qq.com/s/2Qp3RlmX7RhN

回到顶部