收藏
回答

button的hover-class无法在map组件中正确应用

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug button map cover-image 客户端 7.0.0 2.5.0

- 当前 Bug 的表现(可附上截图)

根据官方文档说明,button如果设置了按钮的背景色,为了表示按钮被点击了,可以指定一个hover-class来应用点击时的样式。

如下面的源码所示:

index.wxml

<map>

<button hover-class="btn" >Hello World!</button>

</map>



<view>

<button hover-class="btn" >Hello World!</button>

</view>


index.wxss

map {

width: 100vw;

height: 50vh;

}


button {

top: 50%;

width: 80%;

color: white;

background-color: blue;

}


.btn {

background-color: red;

}


如上所示,我为map中添加一个button组件,也设置了背景色,指定了hover-class,在模拟器中这两个button的样式都可以被应用上:


但是到了手机上,小程序会忽略在map上按钮的变化:


这是在手机上我同时点按钮的状况


所以我认为这应该是一个八阿哥





=======================================================================================================

我后来又进一步分析了一下,得到一个猜想:

    如果是在map组件中增加button,默认是自动为button外面套用一个cover-view标签


也就是说如果代码是这样的:

<map>
  <button>Hello World!</button>
</map>


那么小程序实际上渲染时这段代码会渲染为:

<map>
    <cover-view>
         <button> Hello World! </button>
    </cover-view>
</map>

我想可能这样才能保证button组件可以正确的显示在map的上面


为了证实这个猜想,我后来又在最外层做了一个cover-view套button的代码:

<cover-view>
  <button hover-class="btn" hover-stay-time="{{1000}}">Hello World!</button>
</cover-view>

然后果然印证了我的猜想:


这样在模拟器中依旧显示没有问题,但是到了手机上,不论怎么点击都是不行的。


所以我认为问题就出在cover-view对button这里的样式应用上


回答关注问题邀请回答
收藏

1 个回答

  • RedHood
    RedHood
    2019-01-21

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2019-01-21
    有用
    回复
登录 后发表内容