微信小程序放在text文本组件后的button组件的单击事件(bindtap)无效

问题：开发微信小程序时，突然发现放在text文本组件后的button组件的单击事件(bindtap)无效，就是点击不执行。解决：修改button组件的样式的z-index值，大点，保证button组件在text文本组件上面就行。问题原因：应该是button组件被text文本组件盖住了。界面参考如下：部分代码参考如下：.wxml部分<view class="flex-wrp" style="f

cwr888

3849人浏览 · 2022-05-26 16:11:58

cwr888 · 2022-05-26 16:11:58 发布

问题：开发微信小程序时，突然发现放在text文本组件后的button组件的单击事件(bindtap)无效，就是点击不执行。
解决：修改button组件的样式的z-index值，大点，保证button组件在text文本组件上面就行。
问题原因：应该是button组件被text文本组件盖住了。
界面参考如下：

部分代码参考如下：

.wxml部分

  <view class="flex-wrp" style="flex-direction:column;">
    <view class="top-info">
        <text class="noticeInfo">我们总不能流血了就喊痛，怕黑就开灯，想念就联系，疲惫就放空，被孤立就讨好，脆弱就想家，不要</text>
        <text decode="{{true}}">&nbsp;&nbsp;&nbsp;</text>
        <button style="width:200rpx" class="noticeMoreInfo" bindtap="maskSwitch">查看更多>></button>
    </view>
  </view>

.wxss部分

.flex-wrp{
  width:100%;
  height:100%;
}
.top-info{
  padding: 5px 10px;
  background-color: #EFF6FF;
  font-size: small;
}
.noticeInfo{
  color: #999999;
}
.noticeMoreInfo{
  color:#2C6CCE;
  text-decoration-line: underline;
  background-color: #EFF6FF;
  font-size: small;
  margin:0;
  padding:0;
  display:inline;
  position: absolute;
  z-index: 1;
}

.js部分

Page({
  data: { // 参与页面渲染的数据
    showTopNotice:false
  },
  maskSwitch:function(){
   this.setData({
    showTopNotice:!this.data.showTopNotice
   });
  //console.log(this.data.showTopNotice);
 }
})