小程序
小游戏
企业微信
微信支付
扫描小程序码分享
cover-view, cover-image嵌套在map组件中,设置为绝对定位MAC客户端预览机型iPhone7
8 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
用你的代码试了下,在真机上看是有 `test` 文本的
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
cover-image里不能嵌套cover-view,类似html中的img标签
能否看下代码是怎样的?
有test,但是真机上面没有样式了
我也调试出来了,需要更新微信版本至6.5.12(7月11日更新),这个给忘记了。对于低版本需通过wx.canIUse('cover-image')判断
刚才的代码贴上来的时候点了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>
.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>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
用你的代码试了下,在真机上看是有 `test` 文本的
cover-image里不能嵌套cover-view,类似html中的img标签
能否看下代码是怎样的?
有test,但是真机上面没有样式了
我也调试出来了,需要更新微信版本至6.5.12(7月11日更新),这个给忘记了。对于低版本需通过wx.canIUse('cover-image')判断
刚才的代码贴上来的时候点了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>
.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>