微信小程序 button按钮怎么触发事件? bindtap语法怎么使用?

这篇具有很好参考价值的文章主要介绍了微信小程序 button按钮怎么触发事件? bindtap语法怎么使用?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在前端网页中我们需要触发一个事件如果按钮点击后调用函数,文本、图片、链接被点击后调用一个函数一个事件,我们都知道用click,可是微信小程序中的click是不存在的,他怎么才能和网页中一样的使用click的呢?

1.bindtap语法的使用

这时候有人肯定会问,我不是来学习click的怎么教我bindtap语法使用了?

其实不然,bindtap是微信小程序中的onclick鼠标点击事件

在小程序中,不存在HTMLZ中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。

①通过bindtap,可以为组件绑定tap触摸事件,语法如下:

<button type="primary" bindtap="onclick">按钮</button>

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

 ②在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:

Page({
  onclick(e){
    console.log(e)
  }
})

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

我们尝试需要点击按钮输出e里面是啥

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

我们会看多很多参数,这时候不用怕,我给大家讲解一些常用的。

属性 类型 说明 基础库版本
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组

 2.1.type属性

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

我们从图书看出在bindtap事件中他返回的是tap,其实我们事件有很多种

 以上三种是我们最常见的,是否还有其他属性我们可以前往微信小程序帮助文档进行查看

2.2.timeStamp属性

这个属性就是代表我们WXML页面从打开后开始计时,到事件被触发为止显示的一个时间戳

单位时毫秒

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

 2.3 target属性

target属性是我们最长用到的属性,所以我给他标红了,

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

看图明白一个大概,后面实战种使用到我们会详细讲解,现在都做一个了解

2.4  currentTarget属性

  currentTarget属性和target属性其实是一样的,但是他有一个小小的区别

微信小程序bindtap,微信小程序,微信小程序,前端,小程序

看图我们是不是以为 他们2个没有区别数据都是一样的,其实currenttarget属性是指向当前组件的父组件,

我们会在后面推文种写出他两的本质区别,可以进入主页进行查看文章

2.5 touches和changedtouches属性

其实他们两个属性也是一样的道理,一句话概括他们, 当用户进行多个手指触摸屏幕会留下痕迹,被这两个属性记录,然后返回给后台。文章来源地址https://www.toymoban.com/news/detail-792069.html

到了这里,关于微信小程序 button按钮怎么触发事件? bindtap语法怎么使用?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序点击事件(bindtap)传递参数

    小程序在组件上绑定事件后,传递参数的方式不同于前端开发其他场景中直接加参数的方式,小程序在参数的传递时,采用事件对象的自定义属性的方式,具体实现如下: wxml: view bindtap=\\\"goTo\\\" data-index =\\\"{{item.index}}\\\"点击事件传参/view js中: goTo: function(e){     // 传递的参数    

    2024年02月12日
    浏览(43)
  • 微信小程序:修改按钮BUTTON尺寸

      微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style即可: (当前为开发者模式无法进入会话,真机调试即可看到效果) 

    2024年02月11日
    浏览(41)
  • 微信小程序button按钮去除边框

    今天在小程序开发中想要去除按钮的边框,直接使用 border: none 不起作用,选择器后加一个::after伪元素才行。 例: button:: after{ border: none }

    2024年02月06日
    浏览(34)
  • 微信小程序button按钮无法更改尺寸解决

    在微信小程序新版本中, button按钮 无法支持在wxss文件中 直接自定义width 和 height   解决方法有两种:         1. 推荐使用: 在根目录中的app.json文件中, 删除其中的 即可, 但影响性较大, 如果项目中的其他样式 使用了新版本的特性, 则 删除该行代码后 项目中的其他样式 可能会

    2024年02月15日
    浏览(38)
  • 《微信小程序案例4》bindtap点击事件使用自定义数据data-xxx传参方法

    1、首先在标签中使用data-xxx来自定义要传入的数据,xxx代表数据值 2、绑定事件bindtap=xxx 3、在js中使用event.currentTarget.dataset.xxx来取你传入的值 点击结果成功:

    2024年02月13日
    浏览(38)
  • 微信小程序button按钮去除边框去除背景色

    button边框 去除button边框 在button上添加plain=“true” 在css中添加button.avatar-wrapper {background: none}用于去除button背景色 在css中添加button.avatar-wrapper[plain]{ border:0 }用于去除button边框

    2024年02月06日
    浏览(33)
  • 微信小程序【button按钮页面跳转】两种方式

    首先,微信开发者工具打开是这个样子的   红框的设置如下 第一种方式:新建component(组件) 只用输入一次就会出现,四个文件,form.js,form.wxss,form.wxml,form.json 在index.js文件中出现,建立在methods:{}里面  第二种方式:直接建立页面,两种方式,index.js中设置是不一样的

    2024年02月11日
    浏览(42)
  • 【微信小程序】按钮button组件宽设置无效解决方案

    给button组件添加一个class类名,在对应的wxss中编写宽的设置样式,竟然发现无效, 审查元素后发现了原因,被小程序自带的样式影响了 当没有设置size=\\\"mini\\\"的属性时,被小程序自带默认样式button:not([size=mini])中设置的width:184px优先级更高给覆盖了 当设置了size=\\\"mini\\\"的属性时,

    2024年02月10日
    浏览(47)
  • 【微信小程序】使用button组件来实现一个带有点击效果的按钮,按钮中间添加一个大的+号图标

    在微信小程序中,你可以使用 button 组件来实现一个带有点击效果的按钮,并在按钮中间添加一个大的+号图标。以下是一个示例代码: 在上述代码中,我们使用了微信小程序的 button 组件,并在其中添加了一个 text 组件,文本内容为+号。使用类名为 button 的样式设置了按钮的

    2024年02月16日
    浏览(35)
  • 微信小程序数据绑定和事件触发

    数据绑定和修改 微信小程序数据绑定是指将数据和视图进行关联,当数据发生变化时,视图也会相应地发生变化。微信小程序数据绑定主要有以下几种方式: 双向绑定:双向绑定是指数据和视图之间的双向关联,当数据发生变化时,视图也会相应地发生变化,反之亦然。在

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包