快应用promt.showDialog接口提供的弹框只能显示文字、按钮简单的元素,无法实现复杂的页面效果。但往往产品经理设计的弹框页面效果很炫,怎么办呢?
比如实现如下弹窗效果:展示一个列表,左边显示图片,右边显示具体介绍,见图1;提示用户查看应用隐私协议弹窗效果,里面内容有超链接效果,能点击,见图2:
图1 列表弹窗 图2 超链接弹窗
此问题一般是开发者对快应用组件、样式属性使用不熟悉导致的。
解决方法
基于stack组件+position:fixed css样式可以实现自定义弹窗,弹窗显示隐藏基于if/show指令来控制,具体代码如下:
初始化数据模型:
data() { return { list: [1, 2, 3], isShow: false, ifShow1: false, ifShow2: false } },
页面布局:
<text onclick="showToast1">自定义弹窗样式1</text> <text onclick="showToast2">自定义弹窗样式2</text> <!-- 弹窗 --> <div if="{{isShow}}" class="modal center-modal"> <div class="toast-box password-box"> <block> <stack class="eyes-input-box"> <div style="flex-direction: column;width: 100%;" if="{{ifShow1}}"> <div style="width: 100%;"> <text style="font-size: 32px;font-weight: 500;">交通违法</text> <text style="font-size: 25px;text-align: right;padding-left: 400px" onclick="hide">隐藏</text> </div> <list style="height: 550px"> <list-item type="list" for="list" style="height: 160px;margin-top: 20px"> <div style="padding-top: 1px;"> <image src="/Common/icon.png" style="border-radius: 100%;width: 100px;height: 100px;"></image> <div style="flex-direction: column; margin-left: 20px"> <text style="font-size: 28px;font-weight: 600;">二级标题</text> <text style="font-size: 26px;margin-top: 10px">相关内容展示,例如商品属性、价格、上架日期等信息展示</text> <div style="height: 2px;background-color:#808080;bottom: 0;margin-top: 25px" if="{{$idx<2}}"> </div> </div> </div> </list-item> </list> </div> <div style="flex-direction: column;width: 100%;" if="{{ifShow2}}"> <text style="font-size: 31px;font-weight: 700;">城市服务</text> <text style="font-weight: 400;"><span>点击“同意”,即表示您同意上述内容及</span><a style="color: #0000ff;" onclick="toast">应用名称的用户协议</a> <span>、</span><a style="color: #0000ff;" onclick="toast">关于应用名称与隐私的声明</a></text> <div style="width: 100%;"> <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">确认</text> <text style="width: 50%; text-align: center; color: #0000ff;" onclick="hide">取消</text> </div> </div> </stack> </block> </div> </div>
页面样式:
.container { flex-direction: column; justify-content: center; align-items: center; .body { width: 100%; height: 100%; flex-direction: column; align-items: center; .img { margin-top: 500px; } .txt { margin-top: 570px; } } // 弹窗样式 .modal { position: fixed; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 0 34px 34px; background-color: rgba(0, 0, 0, 0.18); animation-name: Modal; animation-duration: 130ms; animation-timing-function: ease-in; .toast-box { width: 100%; padding: 25px 50px 20.8px; border-radius: 34px; background-color: white; flex-direction: column; .toast-title { font-size: 41.6px; line-height: 56px; font-weight: 500; font-family: HWtext-65ST; color: #000000; } .toast-tip { font-family: HWtext-55ST; font-size: 29px; color: rgba(0, 0, 0, 0.6); line-height: 40px; margin-top: 3.6px; margin-bottom: 25px; } .label-box { height: 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); .label { color: #000000; width: 100%; font-family: HWtext-55ST; font-size: 34px; } input { margin-right: -11px; } } .manage { height: 100px; font-family: HWtext-65ST; font-size: 29.12px; color: #007dff; font-weight: 500; } .cancel { width: 100%; height: 75px; margin-top: 37.44px; text-align: center; font-family: HWtext-65ST; font-size: 33.28px; color: #007dff; font-weight: 500; } .btn-box { justify-content: space-between; align-items: center; .bind { width: 47%; height: 60px; border-radius: 10px; font-family: HWtext-65ST; text-align: center; font-size: 33.28px; color: #007dff; margin: 16px 0; font-weight: 500; } .line { height: 50px; width: 1px; background-color: rgba(0, 0, 0, 0.2); } .quit { width: 47%; height: 60px; border-radius: 10px; text-align: center; font-family: HWtext-65ST; font-size: 33.28px; color: #007dff; margin: 16px 0; font-weight: 500; } .bind:active { background-color: rgba(0, 0, 0, 0.1); // 待高保真修改 } .quit:active { background-color: rgba(0, 0, 0, 0.1); // 待高保真修改 } } .nocar-tip { height: 99.84px; font-size: 33.28px; font-family: HWtext-55ST; color: #000000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } .password-box { margin-top: -110px; padding: 30.63px 50px 20.8px; .toast-title { height: 55.64px; margin-bottom: 30.12px; } .password-tip { flex-direction: column; margin-top: 3.6px; margin-bottom: 25px; .control-tip { font-family: HWtext-55ST; font-size: 24.96px; color: rgba(0, 0, 0, 0.6); } } .error-password-tip { font-family: HWtext-55ST; font-size: 24.96px; color: #fa2a2d; height: 32.76px; margin-bottom: 37.4px; margin-top: 0; } .btn-box { .bind { margin-top: 8px; margin-bottom: 8px; } .quit { margin-top: 8px; margin-bottom: 8px; } } .eyes-input-box { width: 100%; flex-direction: row; justify-content: flex-end; .input-password { width: 100%; height: 94.64px; border: 1px solid #ffffff; border-bottom-color: #000000; padding: 11.44px 0; margin-bottom: 20.8px; } .password-text { width: 100%; height: 94.64px; padding: 11.44px 0; border-bottom: 1px solid #000000; margin-bottom: 20.8px; color: #000000; font-size: 36px; } .eyes-img { width: 49.92px; height: 49.92px; margin-top: 23px; } } .password-loading-box { flex-direction: row; align-items: center; justify-content: space-between; height: 150px; .loading-text { font-family: HWtext-55ST; font-size: 33.28px; color: rgba(0, 0, 0, 0.96); } .loading-circular { width: 102px; height: 102px; color: #666666; } } } } }
事件绑定:
showToast1() { this.isShow = true; this.ifShow1 = true this.ifShow2 = false }, showToast2() { this.isShow = true; this.ifShow1 = false this.ifShow2 = true }, hide(){ this.isShow = false; }, toast() { prompt.showToast({ message: '查看隐私协议' }) }
欲了解更多详情,请参阅:
快应用开发指导文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper
快应用Style样式:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style
快应用通用样式:
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204411140277140364?fid=18
原作者:Mayism