一、功能需求
微信小程序加载一个网页，在网页上悬浮一个视图，显示5秒钟倒计时
二、实现代码(倒计时异常)
由于在小程序中使用web-view加载网页会自动铺满整个小程序页面，且无法修改容器高度，所以采用cover-view组件作出悬浮效果，测试正常；
<view class="container">
<web-view src="{{links[currentIndex]}}"></web-view>
<cover-view class="toolbar">
<button class="cancel-btn" bind:tap="handleCancel">取消</button>
<button class="next-btn {{countdown > 0 ? 'disabled' : ''}}" bind:tap="{{countdown === 0 ? 'handleNext' : ''}}">{{currentIndex < links.length - 1 ? '下一页' + (countdown > 0 ? '(' + countdown + ')' : '') : countdown > 0 ? '完成(' + countdown + ')' : '完成'}}</button>
</cover-view>
</view>
异常问题测试流程：
- 由于模拟器运行时，
web-view上的cover-view悬浮控件无法显示，需真机查看实际效果，所以模拟器测试时，将web-view容器隐藏，直接测试cover-view悬浮倒计时效果，此时正常； - 将
web-view放开，在真机上测试时，cover-view控件正常显示，但控件上倒计时数字没有自动更改，但js代码中倒计时逻辑打印显示正常，真机环境cover-view控件下button上倒计时效果无法正常显示；
查看官方文档，cover-view是可以嵌套button 使用的：
之后，各种修改代码均无法正常显示；最终万般无奈之下，将cover-view替换成view(将web-view隐藏)测试，此时倒计时竟然正常显示了，此时可以确定，倒计时异常是由cover-view导致的，但是此处又必须使用cover-view，只能继续测试寻找其他解决方案；
异常原因：
cover-view嵌套button导致倒计时异常；
三、解决方案
最终经过测试，将cover-view下显示倒计时的控件使用cover-view替换，再次进行测试，倒计时正常显示；
此处为了保持样式一致，我将所有button替换成了cover-view:
<view class="container">
<web-view src="{{links[currentIndex]}}"></web-view>
<cover-view class="toolbar">
<cover-view class="cancel-btn" bind:tap="handleCancel">取消</cover-view>
<cover-view class="next-btn {{countdown > 0 ? 'disabled' : ''}}" bind:tap="{{countdown === 0 ? 'handleNext' : ''}}">{{currentIndex < links.length - 1 ? '下一页' + (countdown > 0 ? '(' + countdown + ')' : '') : countdown > 0 ? '完成(' + countdown + ')' : '完成'}}</cover-view>
</cover-view>
</view>
四、疑问❓
虽然此处解决了倒计时问题，但由于是小程序开发新手，依然不明白为何cover-view嵌套button的情况下倒计时显示效果会出现异常， 如果有大佬能够解答，不胜感激；
