收藏
回答

WEUI Half Screen Dialog 组件如何自定义右上角的图标?(右上角icon不显示)

如下图所示,想将弹窗右上角的icon换为“√”或者“完成”,但遇到了问题,目前的问题是:

  1. Half Screen Dialog 右上角的按钮不显示icon和文字,但却占据原来的位置
  2. 不知道如何自定义右上角的图标?官方文档中也没有找到这方面的内容

回答关注问题邀请回答
收藏

2 个回答

  • 虾仁鱼🍤🚶🐠
    虾仁鱼🍤🚶🐠
    2023-02-09

    自己解决了,解决方法如下:

    在使用 Half Screen Dialog 时,将其属性列表的 closabled 属性设置为 false,不展示关闭按钮,此时左上角和右上角的图标都会消失,然后就可以通过 slot="title" 插槽自定义顶部区域的按钮和标题了。

    如果还是觉得样式不美观的话,可以用绝对定位和浮动把按钮调整到原来位置。 解决后的样式:

    官方文档:https://wechat-miniprogram.github.io/weui/docs/half-screen-dialog.html#%E5%B1%9E%E6%80%A7%E5%88%97%E8%A1%A8

    还是想吐槽一下,官方文档如果能详细一点就好了……


    ——————————分割线——————————


    虽然隐藏了右上角的图标,但是元素依旧存在,会影响自定义顶部区域的点击事件,如下图:



    解决方法:在页面wxss文件中添加如下样式(注意是页面wxss文件,不能是组件wxss文件)


    .weui-icon-btn.weui-icon-btn_more {
        display: none;
    }
    


    2023-02-09
    有用 1
    回复
  • ㅤ
    2023-02-09

    看看是层级的问题还是什么其他的问题?

    2023-02-09
    有用
    回复 1
    • 虾仁鱼🍤🚶🐠
      虾仁鱼🍤🚶🐠
      2023-02-09
      非常感谢关注这个问题!已经找到解决方案并发在评论区了~
      2023-02-09
      回复
登录 后发表内容