从确认框到半屏表单WeUI Dialog 这7种选法怎么选【免费下载链接】weuiA UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.项目地址: https://gitcode.com/gh_mirrors/we/weui点删除笔记屏幕中间弹出一个框问你确定要删吗。这是移动 H5 里对话框最典型的出场瞬间。WeUI 是微信官方设计团队的移动端 UI 库WeUI Dialog 就是其中的对话框组件在页面上盖一层遮罩加浮层逼用户先做个选择点掉之前流程不走。从默认样式到半屏形态外观都写在样式文件 weui-dialog.less 里。对话框解决什么问题手机屏幕小提示语没地方常驻。Toast 一闪而过用户容易漏掉Dialog 相反遮罩把页面其余部分挡住流程被强制打断用户点完确定或取消才放行。所以判断用不用对话框标准只有一条这一步必须得到答案像删还是留付还是走。至于保存成功这类轻提示用它反而添堵。选哪种对话框本质是决定怎么打断标题露不露、按钮摆几个、跟 iOS 还是 Android 的口味、要不要铺开半屏。先问自己三个问题——必须强制用户回答吗要说的话多不多用户主要用哪个系统按这三个答案WeUI Dialog 的 7 种用法可以归成三类。按需求挑样式几句话能说完的小框用得最多。标准形态是标题加正文加两个按钮内容本身已经说得清就省掉标题框更轻碰上删除这类危险操作把按钮换成警示色调weui-dialog__btn_warn风险一眼可见。按钮文字长、或想强调主操作就让按钮竖着排weui-dialog_btn-wrap一行一个误触少。想跟系统口味一致。默认样式偏 iOS 味道产品跑在 Android 上时给同一套结构加上weui-skin_android框和按钮就变成 Material 观感。内容多一个框装不下。换半屏对话框它从屏幕底边往上展开、占据半个屏幕半屏对话框示例 里有完整写法。框里还要放输入框、列表这类复杂交互可参考表单样式文件 weui-form_common.less 做样式扩展。最小 HTML 结构这 8 行 HTML 就是一个标准确认对话框div classweui-dialog div classweui-dialog__hdstrong classweui-dialog__title删除这条笔记/strong/div div classweui-dialog__bd删除后无法恢复/div div classweui-dialog__ft a rolebutton classweui-dialog__btn weui-dialog__btn_default取消/a a rolebutton classweui-dialog__btn weui-dialog__btn_primary确认删除/a /div /div__hd标题、__bd正文、__ft按钮区三段可自由组合__btn_primary是主操作、__btn_default是辅助操作其余交给样式。容易踩的坑正文控制三行以内超了就换半屏对话框用户没耐心滚动。按钮文案要能猜出后果确认删除好过确定用户点下去不犹豫。按目标端选风格Android 产品别套默认对话框观感会飘。遮罩weui-mask别漏它负责挡住底层页面少了它对话框只是悬在那。辅助操作居左弱化、主操作居右高亮位置别摆反。想自定义外观翻 weui-dialog.less那是整个 Dialog 的样式入口同库的 ActionSheet、Toast 等提示组件也值得顺手看看。【免费下载链接】weuiA UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.项目地址: https://gitcode.com/gh_mirrors/we/weui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考