微信小程序延迟显示按钮

可控制延迟显示的微信小程序 loading 组件，默认请求超过05s才显示loading动画；支持 slot 自定义 loading 内容。

在项目中，若网络良好的情况下，每次请求都显示loading动画，会导致页面短时间内频繁闪现loading动画，用户体验不佳。本组件可自定义loading组件显示延时，只有当请求超过设置的时间未完成时，才显示loading动画，减少loading动画出现的次数。

        在写一个小程序界面的时候，发现这个页面的按钮点击失效，打印log打印不出来，而其他页面的点击事件仍旧可以触发。找了半天发现按钮被textarea组件遮挡了，导致点击不到。

解决办法：给textarea添加样式，修改它的高度。

注意：可通过下面这个窗口查看各部分大小及其位置，遇到组件失灵时可以先看一下有没有被覆盖。

选中 按钮 组件，展开 检查器-数据绑定及设置 面板，在自定义内容输入框中即可设置按钮的文本内容。

先上一张图

如图1-1所示，想做一个上面上的搜索框，很容易想到上面搜索框的布局方式就是，input框占满整个行间，然后清空按钮通过absolute定位到input框上面，然而这样的布局方式在小程序真机测试中是有问题的，问题描述如下：

问题所在： 当input框处于聚焦状态时，及键盘属于拉起状态。点击清空按钮是无法清空input框里的数据的，简单的说就是此时加在清空按钮上的点击，触摸等事件并不会触发。只有当input框失去焦点时及键盘属于隐藏状态时，清空按钮上的事件才能被触发。

原因所在：小程序中当input框属于聚焦状态时，会有个层级的提升，它的层级是最高的，会比覆盖在他上面的标签层级高，因此此时点击清空按钮时实际上点击的还是input框。只有当input框失去焦点时才会恢复到正常的层级，此时上面的覆盖标签会比input框层级高

当初以为是组件问题，结果采用小程序上的 cover-image ， cover-image 组件也无法解决问题。

解决办法：

因此我们得使用图1-2的布局方式，采用正常的左右布局的方式。input框和按钮各占整行的一部分，然后通过css去使input框看上去是占用一整行，清空按钮覆盖在上面，对于前端人员来说还是很好写的哈。

以上就是关于微信小程序延迟显示按钮全部的内容，包括:微信小程序延迟显示按钮、微信小程序 | 按钮点击（bindtap）失效、Towify制作小程序配置按钮时，如何设置按钮的文本内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！