大概的代码如下,
是在小程序中打开web-view组件显示网页,
问题只出在android端,
且只存在于android端的微信小程序中,浏览器以及微信中打开链接都正常;
想要的效果为,点击按钮,打开弹框,
使用过的框架与方式:
CSS先max-height为0;点击打开之后max-height设置为定高,transition过渡,这种方式问题最大,打开和关闭时都会卡顿数秒,
用display:none和display:block切换显示,打开时等待最多7秒,关闭可以直接关闭,
最开始用的vue,样式尝试多种方式,无果,怕框架有兼容性问题,用jquery依然无法正常实现该效果,(其实功能是正常的,就是反应慢);
希望官方能关注一下这个可能的bug,如果我的代码有问题希望能指出
html:
<div class="btn-group"> <img class="share" src="./img/share.png" alt=""> <button class="want">我想要 |
css:
.btn-group { background: #fff; height: 1.2rem; width: 100%; position: fixed; bottom: 0; display: flex; justify-content: flex-start; align-items: center;}.btn-group>img { width: 0.48rem; height: 0.48rem; margin-left: 0.4rem; display: block;}.btn-group>button { width: 5.8rem; height: 0.9rem; margin-left: 0.52rem; color: #fff; background: -webkit-linear-gradient(left, #FAAC66, #ED575E); border: 0; border-radius: 0.45rem; font-size: 0.34rem; outline: 0;}.btn-group button.hidden { display: none;}.full { display: none; position: fixed; top: 0; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 1); /* background: url("http://pic.sc.chinaz.com/files/pic/pic9/201601/apic18171.jpg"); */ background-size: 150%; /* opacity: 0; */ /* z-index: -50; */ opacity: 0.3; z-index: 50; -webkit-transition: opacity .5s; transition: opacity .5s;}.full-in { display: block;}.full:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: inherit; -webkit-filter: blur(100px); filter: blur(100px); z-index: 51;}.address { display: none; width: 100%; /* max-height: 0rem; */ max-height: 6.66rem; overflow: hidden; position: fixed; bottom: 0; z-index: 100; -webkit-transition: all .5s; transition: all .5s;}.address-in { display: block;}.address .title { height: 1rem; width: 100%; background: #FAFAFA; border-radius: .24rem .24rem 0px 0px; display: flex; justify-content: center; align-items: center; position: relative; border-bottom: 1px solid #ccc;}.address .title p.close { color: #777; font-size: .3rem; position: absolute; left: 0; line-height: 1rem; margin-left: .32rem}.address .title p { color: #111; font-size: .32rem;}.select { max-height: 5.66rem; overflow: auto;}.select-in { max-height: 5.66rem;}.select .option { width: 100%; height: 1.415rem; background: #FFFFFF; border-top: 1px solid #ccc; padding: .3rem .32rem;}.select .option:first-child { border-top: 0;}.select .option .detail { display: flex; justify-content: flex-start; align-self: center; color: #777; margin-top: .21rem;}.select .option .detail .name { font-size: .32rem; color: #111;}.select .option .detail img { width: 0.24rem; height: 0.28rem; display: block;}.select .option .detail p { font-size: .22rem; line-height: 0.28rem}p.address-detail { width: 4.8rem; margin-left: 0.14rem; margin-right: 0.84rem;}p.address-distance { width: 0.9rem; text-align: right;} |
js:
(function (doc, win, px, rem) { var docE1 = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () { var clientWidth = docE1.clientWidth; if (!clientWidth) return; docE1.style.fontSize = rem * (clientWidth / px) + "px"; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false); })(document, window, 375, 50); |
$(".full").addClass("full-in"); $(".address").addClass("address-in"); }, closeList: function () { $(".full").removeClass("full-in"); $(".address").removeClass("address-in"); },};$(".btn-group .want").on("click", function () { container.openList() }) $(".address .title .close").on("click", function () { container.closeList() }) |
反应慢是正常的，手机要是low点 就更慢了
只在安卓小程序的web-view组件内慢,ios没问题,安卓测试机型处理器835,应该还不算low吧