button的hover-class无法在map组件中正确应用
- 当前 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这里的样式应用上