- 当前 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这里的样式应用上
麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题