最近项目业务升级,有些按钮防止误触还是要加wx.showModal的。但wx.showModal样式并不好看,在官方推荐的weui库上有一个Dialog弹窗组件可以实现和wx.showModal一样的效果并且样式要好看一点。 于是我打算直接用dialog组件,并且将之前的wx.showModal修改
dialog"> <div class="weui-dialog__bd">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div> <div class="weui-dialog__ft"> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a> </div> </div> </div> <!--END dialog2--> </div>...
23.weui界面布局设计-WeUi表单组件-uploader上传 时长:11分24秒 24.weui界面布局设计-WeUi操作反馈-actionsheet弹出式菜单 时长:04分58秒 25.weui界面布局设计-WeUi操作反馈-dialog对话框 时长:05分22秒 26.weui界面布局设计-WeUi操作反馈-msg提示页 时长:11分26秒 27.weui界面布局设计-WeUi操作反馈-pick...
框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本 小程序 Bug dialog 工具 6.5.3 2.0.0 <mp-dialog mask="true" mask-closable="false" title="{{title}}" show="true" bindbuttontap="tapDialogButton" buttons="{{buttons}}"> </mp-dialog> mask-closable=false点击遮罩层,dialog还是...
一、问题背景: 在项目中遇到问题,使用weui.js的dialog 和 actionsheet 插件,使用手机的物理退回键或者网页的回退键,提示框不会自动隐藏。 二、解决方法...
本组件基于weui.css 及 jQuery。 参考官方样式:WeUI。 一、CSS部分,主要是动画效果 @import url('https://weui.io/style/weui.css'); /* Half screen Dialog */ .weui-half-screen-dialog { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s...
.weui_dialog { position: fixed; z-index: 13; width: 85%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform:translate(-50%,-50%);/需要加上这行,QQ和微信里才能显示居中/ background-color: @weuiDialogBackgroudColor; text-align: center;
线上客户反馈截图样式正常渲染截图代码示例 复现概率还是挺高的/* 隐藏弹窗的头和尾 */ .only-bd .weui-dialog__hd, .only-bd .weui-dialog__ft{ display: none; } .only-bd .weui-dialog__bd { margin: 0; padding: 0; text-align: center; min-width: 240px; }
也就是说在组件的wxss中无法正常使用.weui-half-screen-dialog 这个外部样式类,然后看层级结构直接使用.weui-show .weui-hale-screen-dialog来设置样式 也是无效的,因为这些样式是在#shadow-root中,虽然了解的不深,但应该也是类似于虚拟节点,无法直接修改他的样式。
知晓程序注:微信今天正式发布了 WeUI.js 动态视觉组件库。这意味着,大家可以在小程序里面,直接使用在官方设计文档附录中的视觉组件(而不需要额外引入其他库)。...概述 weui.js 是 WeUI 的轻量级 JS 封装,不需要依赖其它库,GZIP 后仅有 9.0 KB。...组件 actionsheet