bindtap_bindtap用法 - CSDN
精华内容
参与话题
  • 小程序bindtap事件与冒泡

    千次阅读 2018-07-19 09:51:36
    text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text> 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js...

    bindtap就是点击事件

    在.wxml文件绑定:

    <text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>

    在一个组件的属性上添加bindtap并赋予一个值(一个函数名)

    当点击该组件时, 会触发相应的函数执行

    在后台.js文件中定义tapMessage函数:

    //index.js
    Page({
      data: {
        mo: 'Hello World!!',
        userid : '1234',
      },
    
       // 定义函数
      tapMessage: function(event) {
        console.log(event.target.id);       // 可获得
        console.log(event.target.name);     // 无法获得, 通过target只能直接获取id
        console.log(event.target.dataset);  // 要获得其它属性, 需要从dataset(数据集)中获取
        console.log(event.target.dataset.userxxx);  // userxxx为自定义的属性名, 但命名方式为:data-userxxx
      
        // 这里还原使用userXxx
        console.log(event.target.dataset.userXxx);
      }
    })
    

    event封装的是该事件的信息, 如上通过它可得到一些数据

    注意一点:

                      <!-- data-userXxx,这个大写的X要改为-x -->
        <text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>

    自定义数据(data-)中的大写改为 短横线+其小写

    取数据时, 去掉data和那些短横线并还原大写 (data-user-xxx  --> userXxx)

     

    事件冒泡就是指嵌套事件发生

    如果多层标签嵌套, 里层事件发生后, 其外层会相应发生, 如:

     <view bindtap='handout'>
        outer
        <view bindtap='handmiddle'>
          middle
          <view bindtap='handinner'>inner</view>
        </view>
      </view>
      handout: function () {
        console.log("out");
      },
    
      handmiddle: function () {
        console.log("middle");
      },
    
      handinner: function () {
        console.log("inner");
      }

    点击inner三个事件都执行, 点击middlek执行handmiddle和handout, 点击out只执行handout

    阻止事件冒泡行为: 将bindtap改为catchtap就行了, 只会触发自身的点击事件

     <view bindtap='handout'>
        outer
        <view catchtap='handmiddle'>
          middle
          <view bindtap='handinner'>inner</view>
        </view>
      </view>

    需要理解是, 它阻断自身的冒泡行为

    如上点击inner, 执行的是handinner和handmiddle两个函数

    不管是不是自身触发的点击行为, 传到我这里, 我就将它阻断(不再向上传递)

    展开全文
  • 微信小程序之事件(bindtap和catchtap) 微信小程序的事件请参考:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html。在这里不必啰嗦。 我们都知道bindtap和catchtap都是当用户点击该...

    微信小程序之事件(bindtap和catchtap)

    微信小程序的事件请参考:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html。在这里不必啰嗦。
    我们都知道bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。如:

    <view id="outer" bindtap="handleTap1">
      	outer view
        <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
    </view>
    
    Page({
        handleTap1:function(event){  //点击输出outer view bindtap
          console.log("outer view bindtap")
        },
        handleTap2: function (event) {  //点击输出middle view
          console.log("middle view catchtap")
        },
        handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap
          console.log("inner view bindtap")
        },
    })
    <view id="outer" bindtap="handleTap1">
      	outer view
        <view id="middle" bindtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
    </view>
    
    Page({
        handleTap1:function(event){  //点击输出outer view bindtap
          console.log("outer view bindtap")
        },
        handleTap2: function (event) {  //点击输出outer view bindtap middle view
          console.log("middle view catchtap")
        },
        handleTap3: function (event) {  //点击输出outer view bindtap inner view bindtap  middle view catchtap
          console.log("inner view bindtap")
        },
    })



    展开全文
  • 小程序bindtap参数传递

    千次阅读 2019-01-12 11:27:09
    小程序参数中data-xxx 后面的参数不能用...view class='content' data-gid='{{item.gId}}' bindtap='openChatView'&gt; js openChatView: function (event) { var $this = this; console.log(event.cur...

    小程序参数中data-xxx 后面的参数不能用驼峰

    正常
    wxml

    <view class='content' data-gid='{{item.gId}}' bindtap='openChatView'>
    

    js

    openChatView: function (event) {
        var $this = this;
        console.log(event.currentTarget.dataset.gid)
      },
    

    异常

    wxml

    <view class='content' data-gId='{{item.gId}}' bindtap='openChatView'>
    

    js

    openChatView: function (event) {
        var $this = this;
        console.log(event.currentTarget.dataset.gId)
      },



    作者:程序员不务正业
    链接:https://www.jianshu.com/p/6bcbbc985345
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • bindtap事件

    万次阅读 2018-01-09 10:41:13
    一、bindtap事件 在wxml文件中绑定bindtap事件, C语言资料下载 然后在js文件中进行响应 Page({ TZdown: function () { wx.navigateTo({ url: '../download/download' }); } })这样在单机view...

    一、bindtap事件

    在wxml文件中绑定bindtap事件,

     <view class='wel-list' bindtap='TZdown'>
        <image src="/images/welcome_08.png"></image>
        <text>C语言资料下载</text>
      </view>

    然后在js文件中进行响应
    Page({
      TZdown: function () {
        wx.navigateTo({
          url: '../download/download'
        });
      }
    })
    这样在单机view层的时候就会跳转到指定的URL地址了

    二、遇上的问题

    在json文件中书写的修改标题栏文字颜色的支持white/black两个颜色,但是在app.json中定义了white后子目录里面的设置失去效果了
    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black"
    }

    具体问题还不明确,但是第二天自动的显示黑色了,问题在于编辑器吧

    展开全文
  • 微信小程序-bindtap等事件传参

    万次阅读 多人点赞 2017-03-01 20:28:00
    什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, ...
  • 小程序bindtap和cachetap的区别

    千次阅读 2018-08-17 15:28:19
    在这里先简单的说一下何为冒泡事件和为非冒泡事件 ...view bindtap='a'&gt; 1 &lt;view bindtaptap='b'&gt; 2 &lt;view bindtap='c'&gt; 3 &lt;/view&gt; ...
  • 微信小程序之bindtap事件传参

    万次阅读 2017-10-23 10:42:49
    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过...bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e
  • 微信小程序bindtap事件传参

    万次阅读 2019-02-23 16:26:43
    1. 编写目的 ... 2. 例子 wxml文件中代码如下:这个图片点击事件会由img_smile函数来处理,并且传递过去一个参数smile,这个参数的值是smile every day。... bindtap='img_smile' data-smile='smile...
  •   小程序绑定事件的方式有很多种,这里我只对bindtap的绑定方式进行介绍,其他的绑定方式也是差不多这样的。 1、不带参数的绑定方式 index.wxml文件中:share表示绑定的事件名称 <view class='enjoy' ...
  • bindtap和catchtap的区别

    千次阅读 2019-06-16 08:43:10
    bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件) catchtap :不会冒泡到父元素上,阻止事件冒泡 (2)如何使用该事件: .wxml 页面写入: <view>...
  • 如果的bindtap绑定事件点击无效未触发并且的你的事件命名是已change结尾的,像这样 那么小程序有时会将它判定为系统默认组件自动触发事件,改个名字就好了 ...
  • 微信小程序 - bindtap不起作用

    千次阅读 2019-03-10 19:24:59
    检查了半天程序,硬是没有Bug信息。 吐槽小程序! 日常吐槽! 不想写小程序了! Solution 在绑定tap事件的标签上检查是不是bind写错了!我无意间写成了bingtap,结果没有错误信息! 继续吐槽!......
  • 小程序 view使用bindtap传值问题

    万次阅读 2016-12-26 15:31:21
    如图,view标签 加 bindtap事件,用data-name传值,如果view中只有文字,点击整个view区域都可以接收到data-name的值,如果view里面加一个lable标签,那么点击lable包裹的区域,data-name取不到值。 解决方法:把...
  • 在微信小程序中 最常用的控件 可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType="123">的形式绑定ItemOnclick事件并传递一个dataset,其包含一个名为mType的元素 值为123。 在某一次设计中 有...
  • 微信小程序点击触发事件bindtap

    千次阅读 2018-12-05 15:00:56
    bindtap事件 在wxml文件中绑定bindtap事件,  &lt;view class='wel-list' bindtap='TZdown'&gt;  &lt;image src="/images/welcome_08.png"&gt;&lt;/image&gt;  &lt;text...
  • 微信小程序—bindtap绑定事件 第一步:bindtap。wxml <button type="primary" bindtap="change">更换内容</button> <text>{{text}}</text> 第一步:bindtap。js data: { text: '我是...
  • 1.在绑定的元素上设置如下 2.在js里取出来 data的值 tapTest: function (e) { console.log(e.target.dataset.parameter) //做其他处理 },
  • 微信小程序-bindtap事件传递参数

    万次阅读 2018-12-14 18:41:48
    第一步,绑定事件,定义传递的参数,注意这个参数experienceid一定要小写,如果采用驼峰命名的方法,小程序编译器也会强制的转为了小写,我在这里浪费了好多时间,最后调试打印event.currentTarget.dataset 里面的值...
  • view bindtap="bindName" data-id="123"&gt;&lt;/view&gt; xx.js 代码: 在js中添加如下代码 page({ data:{ id:'' }, bindName: function(e){ var that = this //获取view...
  • 下面我说一下,简单的点击加载页面的bindtap事件. ... wxml ... bindtap="gotochunjiemian"&gt; 这个gotochunjiemian是一个你在js里面定义好的函数 js gotochunjiemian: function (o...
1 2 3 4 5 ... 20
收藏数 15,004
精华内容 6,001
关键字:

bindtap