成都网站建设设计

将想法与焦点和您一起共享

如何解决微信小程序中视图控件与bindtap之间的问题-创新互联

这篇文章将为大家详细讲解有关如何解决微信小程序中视图控件与bindtap之间的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

为容县等地区用户提供了全套网页设计制作服务,及容县网站建设行业解决方案。主营业务为成都网站制作、成都网站建设、容县网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

在微信小程序中 最常用的控件 可以用bindtap(冒泡反应) 如的形式绑定ItemOnclick事件并传递一个dataset,其包含一个名为mType的元素 值为123。

在某一次设计中

有如下结构:

  
    
  

ItemOnclick事件在点击在图片上时不会触发 需要点击在图片之外及外层view范围之内的地方 才会触发

若将bindtap写在标签内 则反过来 点击图片会触发 但点击在图片之外及外层view范围之内的地方不会触发

由此我做出判断

点击事件不会向父级或子级控件传递。

(然而这与冒泡反应的定义是不一致的)

但是最近又碰到下面这种情况:


  
  
     
     
     
     
   

需要实现 点击图片 显示菜单列表 点击每个菜单项 触发MenuItemOnclick事件并传递对应的参数

然后当在标签外的地方点击一下 就触发HideMenuList事件隐藏菜单

而实际产生的效果是 当点击图片时 菜单列表一闪便消失 有时直接没显示
后通过打印log发现是当点击图片触发了ShowMenuList事件后 HideMenuList事件也被触发了(且总在ShowMenuList事件之后)

即点击事件由传递到了外层的 因而触发了HideMenuList事件

这样的话那之前的判断就是错误的

目前还没找到这两种情况之间的关键差异,第二种情况的解决方案是 当显示菜单时 同时创造一个透明遮罩层覆盖除菜单列表外的区域,点击到这个透明遮罩层后触发HideMenuList事件并销毁或隐藏遮罩层

PS:第二种情况的方式 以前在html及Android环境下都有用过 是没有这个问题的,可能微信小程序这方面的底层机制和html及Android不一样,还待深究。

微信小程序bindtap与catchtap的区别详解

参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡:

//视图层
   //在组件中绑定bindtap事件 函数handleTap1
 outer view
  //在组件中绑定catchtap事件 函数handleTap2
  middle view
   //在组件中绑定bindtap事件 函数handleTap3
   inner view
  
 
//逻辑层
Page({
  handleTap1:function(event){  
  //点击handleTap1输出 outer view bindtap  
   console.log("outer view bindtap") 
  },
  handleTap2: function (event) { 
  //点击handleTap2输出 middle view catchtap
   console.log("middle view catchtap") 
  },
  handleTap3: function (event) { 
  //点击handleTap3输出 inner view bindtap middle view catchtap 
   console.log("inner view bindtap") 
  },

关于“如何解决微信小程序中视图控件与bindtap之间的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站题目:如何解决微信小程序中视图控件与bindtap之间的问题-创新互联
文章网址:http://chengdu.cdxwcx.cn/article/pgcii.html