小程序bindtap、catchtap、navigator点击事件无反应

2022大厂内推、百度、腾讯、集度汽车、包跟进度,有兴趣请联系FrancisBingo@163.com

网上比较普遍的说法是:app.json 的page 注册页面的顺序导致的。

还有一个很刁钻的原因:页面的点击事件名称相同,就算是两个不同的页面,但如果两个页面的点击事件名称重复,也会导致点击事件失效。页面的其他错误也可能导致。

如果以上问题都不是你遇到的那请往下看?~

我想要实现如上图的效果,所以用循环写出了好多个”我“按钮,实现的wxml如下;

  <view wx:for="{{buttons}}" wx:key="btx">
    <view class='btc-view' catchtap='mdzznnn'>
      <image class='btnview' src='../../image/bag.png' ></image>
      <text class='textview' >{{item.title}}</text>
    </view>
  </view>
  
  <scroll-view scroll-y="true" class='scroll' >
    <block wx:for="{{infos}}" wx:key="info">
      <view class='pic-view' bindtap='index_imageclick'>
        <image class='ima-view' src='{{item.url}}'></image>
        <text>{{item.name}}</text>
      </view>
    </block>
  </scroll-view>

用了一个view循环和scroll-view实现。这时候神奇的问题发生了,我设置的click事件毫无反应,无论设置bindtap在哪个层级、catchtap和navigator都无没有任何响应。

原因

这是我设置了一个scroll-view的背景颜色。

可以明显看到scroll-view的魔抓是伸的很长。把他上面的button都包含在里面了。

所以这就是click事件没有响应的原因,在此也提醒各位小伙伴们使用scroll-view时的注意事项。

解决办法

解决办法就是设置scroll-view的margin-top来使它不再和上面的view重叠在一起。

到此问题解决~

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
微信小程序中,不能像网页开发中一样直接使用 `<a>` 标签或者 `bindtap` 属性进行跳转。但是,小程序提供了类似的跳转方式,可以使用 `navigator` 标签和 `bindtap` 属性来实现。 `navigator` 标签是小程序提供的一个基础组件,用于跳转到其他页面或者外部链接。使用 `navigator` 标签可以实现类似于 `<a>` 标签的功能。例如,要跳转到另一个页面,可以这样写: ``` <navigator url="/pages/other/other"> 跳转到其他页面 </navigator> ``` 其中,`url` 属性是要跳转的页面路径,需要注意的是,路径是相对于小程序根目录的,不需要加上协议和域名。如果要跳转到外部链接,可以将 `url` 属性设置为外部链接地址。 `bindtap` 属性是小程序提供的一个事件绑定属性,用于在用户点击某个元素时触发相应的事件处理函数。使用 `bindtap` 属性可以实现类似于 `onclick` 的功能。例如,要在用户点击某个按钮时跳转到另一个页面,可以这样写: ``` <button bindtap="onTap">跳转到其他页面</button> ``` 其中,`onTap` 是一个事件处理函数,需要在 js 文件中定义: ``` onTap() { wx.navigateTo({ url: '/pages/other/other' }) } ``` 在事件处理函数中,可以使用 `wx.navigateTo` 或 `wx.redirectTo` 等方法来实现页面跳转。需要注意的是,如果要在事件处理函数中使用 `this` 关键字,需要使用箭头函数或者将 `this` 保存到一个变量中,否则 `this` 指向的是事件对象,而不是当前页面对象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FrancisBingo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值