小程序 cover-view 宽度被内容撑开（已解决）

map组件的自定义气泡（cover-view组件）长度渲染真机不一致，模拟器上正常，在真机上所有的气泡长度都是文本最长的气泡长度，气泡长度不能根据文本自适应

 

<map id="siteMap" show-location scale="{
   
   {15}}" longitude="{
   
   {xxx}}" latitude="{
   
   {xxx}}" markers="{
   
   {markers}}" bindregionchange="regionchange" bindcallouttap="toNavigate">
   <cover-view slot="callout">
      <block wx:for="{
   
   {sites}}" wx:key="index">
        <cover-view marker-id="{
   
   {index}}" class="customCallout">
           <cover-view class="left">
              <cover-view class="title">{
   
   {item.binname}}</cover-view>
              <cover-view class="address">{
   
   {item.binaddress}}</cover-view>
           </cover-view>
           <cover-view class="right"><cover-view class="iconfont icon-daohang"></cover-view></cover-view>
        </cover-view>
      </block>
    </cover-view>
</map>

原因：

现在cover-view内部元素的width取决于最外面的宽度，也就说for循环中只要有一个item宽度变大，其他item宽度也会变大。

解决：

 1. 解决宽度不自适应

背景色不要加在每个item上，而是加在其子元素上

2.图标字体不显示

换成图片

<cover-view marker-id="{
   
   {index}}">
   <cover-view class="customCallout">
      <cover-view class="left">
         <cover-view class="title">{
   
   {item.binname}}</cover-view>
         <cover-view class="address">{
   
   {item.binaddress}}</cover-view>
      </cover-view>
      <cover-image class="right" src="/static/images/gide.gif" />
   </cover-view>
</cover-view>

css中需要包含以下内容 ，其他样式根据自己需要调整

cover-view{
  display: inline-block;
}

思路来源：

cover-view宽度问题 | 微信开放社区