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

最新推荐文章于 2024-12-19 09:38:33 发布

cwr888

最新推荐文章于 2024-12-19 09:38:33 发布

阅读量4k

点赞数 3

分类专栏：小程序文章标签：微信小程序前端小程序

本文链接：https://blog.csdn.net/cwr888/article/details/124986357

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题：开发微信小程序时，突然发现放在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);
 }
})