收藏
回答

web-view(android版本)有问题,大神帮忙看看,先谢谢了

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug web-view 客户端 Android 6.7.0 2.2.0

大概的代码如下,

是在小程序中打开web-view组件显示网页,

问题只出在android端,

且只存在于android端的微信小程序中,浏览器以及微信中打开链接都正常;


想要的效果为,点击按钮,打开弹框,

使用过的框架与方式:

  1. CSS先max-height为0;点击打开之后max-height设置为定高,transition过渡,这种方式问题最大,打开和关闭时都会卡顿数秒,

  2. 用display:none和display:block切换显示,打开时等待最多7秒,关闭可以直接关闭,

  3. 最开始用的vue,样式尝试多种方式,无果,怕框架有兼容性问题,用jquery依然无法正常实现该效果,(其实功能是正常的,就是反应慢);


希望官方能关注一下这个可能的bug,如果我的代码有问题希望能指出


html:

<div class="btn-group">
     <img class="share" src="./img/share.png" alt="">
     <button class="want">我想要button>
   div>
   <div class="full">div>
   <div class="address">
   
     <div class="title">
       <p class="close">取消p>
       <p>选择店铺p>
     div>
     <ul class="select">
       <li class="option">
         <p class="name">店铺名称p>
         <div class="detail">
           <img src="./img//address.png" alt="">
           <p class="address-detail">成都市高新区p>
           <p class="address-distance">0.43kmp>
         div>
       li>
     ul>
   div>


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);


let container={

     openList: function () {

       $(".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()
   })


最后一次编辑于  2018-07-23
回答关注问题邀请回答
收藏

1 个回答

  • 黄超群
    黄超群
    2018-07-23

    反应慢是正常的,手机要是low点  就更慢了

    2018-07-23
    有用
    回复 1
    • -
-
吃蝙蝠嘞,给老子死
-
-
      - - 吃蝙蝠嘞,给老子死 - -
      2018-07-24

      只在安卓小程序的web-view组件内慢,ios没问题,安卓测试机型处理器835,应该还不算low吧

      2018-07-24
      回复
登录 后发表内容