真机预览模式下cover-view, cover-image不展示
发布于 7 年前 作者 guiyingqiu 601 次浏览 来自 问答

cover-view, cover-image嵌套在map组件中,设置为绝对定位
MAC客户端
预览机型iPhone7

8 回复

刚才的代码贴上来的时候点了HTML回复再切回去代码格式有问题,真实代码应该是这样的,并没有在cover-image中嵌套cover-view,麻烦再看一下:

<map id=“pockMap”>

  <cover-view class=‘cover-wrapper’>
    <cover-image class=‘cover-fuzzy-img’ src="…/imgs/redPock.png" />
    <cover-view class=‘inner-wrapper’>
        <cover-view class=‘cover-span-top’>test</cover-view>
        <cover-view class=‘cover-span-bot’>test</cover-view>
    </cover-view >
    <cover-image class=‘cover-fuzzy-img’ src="…/imgs/redPock.png" />
  </cover-view>
</map>

cover-image里不能嵌套cover-view,类似html中的img标签

有test,但是真机上面没有样式了

我也调试出来了,需要更新微信版本至6.5.12(7月11日更新),这个给忘记了。对于低版本需通过wx.canIUse(‘cover-image’)判断

用你的代码试了下,在真机上看是有 `test` 文本的

能否看下代码是怎样的?

.map-container{
  width: 100%;
  position: absolute;
  bottom:0;
}

.cover-wrapper{
  position: relative;
  top:0;
  left:0;
  z-index: 9999;
  width:100%;
}

.inner-wrapper{
  display:inline-block;
  vertical-align:middle;
  width: 40%;
}

.inner-wrapper cover-view{
  text-align:center;
}

.cover-fuzzy-img{
  display:inline-block;
  overflow:hidden;
  vertical-align:middle;
  width:30%;
}

<map id=“pockMap” style=“height: 100%; display: block;” bindtap=“tapMap” show-location=“true” bindmarkertap=“markertap” class=“map-container” markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" controls="{{controls}}" bindcontroltap=“controltap” bindregionchange=“regionchange”><cover-view class=“cover-wrapper”>
        <cover-image class=“cover-fuzzy-img” src="…/imgs/test.png">
            <cover-view class=“inner-wrapper”>
                <cover-view class=“cover-span-top”>
                    测试cover-view
                </cover-view>
                <cover-view class=“cover-span-bot”>
                    测试cover-view
                </cover-view>
                <cover-image class=“cover-fuzzy-img” src="…/imgs/test.png"></cover-image>
            </cover-view>
        </cover-image>
    </cover-view></map>

回到顶部