首页 > 编程语言 >5-微信小程序 点击事件

5-微信小程序 点击事件

时间:2023-09-18 13:11:47浏览次数:40  
标签:微信 程序 点击 事件 按钮 data bindtap

1.点击事件

微信小程序按钮点击事件的主要用处是用于用户交互和反馈。在微信小程序中,开发者需要在UI界面中定义按钮,并使用bindtap()函数来绑定点击事件。当用户点击该按钮时,

bindtap()函数就会被触发,从而实现对应的逻辑处理。

通过bindtap()函数,开发者可以定义按钮点击后需要执行的操作,如跳转到其他页面、更新数据、调用API等。此外,bindtap()函数还可以结合微信小程序的API,实现更复

杂的功能,如获取用户信息、调用设备传感器等。

同时,微信小程序还支持在组件级别定义事件,例如在某个按钮被点击时,不仅仅执行特定的操作,还可以将事件传递给逻辑层进行处理。这种机制可以帮助开发者更好地管理和

维护代码,提高程序的可维护性和可扩展性。

wxml:

wx.js:

data:{

f(e){

console.log(e);

console.log("当前事件类型"+e.type);

console.log("当前传递参数"+e.target.dataset.info);

}

},

结果:

2.案例----点名器

知识点: 点击事件、 定时器 、if else条件判断、索引、 列表渲染

wxml:

<view>{{stuName}}</view>

<view><button type="{{mytype}}" bindtap="f">{{btnText}}</button></view>

wxss:

.a{

text-align: center;

}

.a view{

margin-bottom: 20px;

font-size: 30px;

}

wx.js:

data: {

btnText:"开始",

stuName:"随机点名",

mytype:"primary",

names:["科比·布莱恩特","蒂姆·邓肯","凯文·加内特","鲁迪·汤姆贾诺维奇","塔米卡·凯金斯","埃迪·萨顿"],

flag:true,

timer:0

},

f(){

if(this.data.flag){

    this.setData({

        btnText:"停止",

        mytype:"warn",

        flag:false

    })

    //  console.log(1);检查

//开始定时器

this.data.timer =  setInterval(()=>{

    //索引names

    let index =Math.floor(Math.random()*this.data.names.length)

    //索引成功后,点击呈现

    this.setData({

        stuName:this.data.names[index]

    })

},100)

}else{

    this.setData({

        btnText:"开始",

        mytype:"primary",

        flag:true

    })

    //结束定时器

    clearInterval(this.data.timer)

}   

}

}),

结果:

开始页面

点击开始后页面

点击停止后页面

标签:微信,程序,点击,事件,按钮,data,bindtap
From: https://www.cnblogs.com/ljygzyblog/p/weixin_5.html

相关文章

  • 程序创建更改主记录并添加WBS元素BOM
    调用CCAP_ECN_CREATE实现该功能。REPORTZTEST."ifsy-datum='20160110'."updatetadirsetsrcsystem='DEV'wheresrcsystem='DV1'."commitwork."endif.DATA:LS_CHANGE_HEADERTYPEAENR_API01.DAT......
  • 《LINUX驱动程序设计》学习笔记 ——04
    1.模块的装载竞争(竞态)竞态是驱动程序设计极其重要的方面,始终要铭记:在注册完成后,内核的某些部分可能会立即使用我们刚刚注册的任何设施。换句话说,在初始化函数还在运行的时候,内核就完全可能会调用我们的模块。因此,在首次注册完成后,代码就应该准备好被内核其他部分调用;在用来......
  • 4-微信小程序 相关知识点代码示例
    基于上篇文章的理论文本的介绍来进行相关代码的演示和例子该篇文章需注意,在微信小程序的使用时,应先熟悉里面每个文件的作用,在第二篇文章有详细记载,一般用的比较多的是wxml、wxss、ws.js对应网站的开发就是html、css、js、页面的内容及框架、页面的美化、页面的基本功能1.数据......
  • Win10系统怎么让所有程序都默认以管理员身份运行
    Win10系统怎么让所有程序都默认以管理员身份运行?2023/8/19 很多用户在使用win10系统时,常常使用某一款程序时候,都会跳出“以管理员身份运行”才有效,久而久之会让人心生厌烦,那么如何一键设置任何程序都是以管理员身份运行呢?小编这就为大家奉上教程。步骤如下:1、使用小娜搜索......
  • 基于微信小程序的水果商城系统
    互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力等问题,采用水果销售系统可以有效管理,使信息管理能够......
  • 一个htm Slider程序
    <html><head><STYLEtype=text/css>#floater{Z-INDEX:10;VISIBILITY:visible;POSITION:absolute;}</STYLE><title>htmSlider--塞北的雪</title><bodyleftmargin="10">htmSlider:<br><br><b......
  • 页面输出太多会严重影响web程序的性能
    我有这样一个小程序:asp+sqlserver2000。数据量增加的很快,最近发现它的性能非常差,每次打开都需要十几秒,甚至几十秒,因为我的程序分页用的是我自己的分页程序:难道这个分页程序有问题,但是其他地方用到它没有感觉到慢呀,我没事就琢磨他,到网上查资料,结果没有具体查到说到我......
  • python第一个程序
    input(name)   注意input读取的值,都是str字符串数据类型转换数据类型(需要转换的变量名) 格式化打印在字符串前面加f可以告诉解释器这个字符串里引用了变量{}里面写引用的变量名流程控制单分支fi条件:当条件为true时,执行子代码双分支fi条件:当条件......
  • python实现一个简单的背单词程序
    功能需求给定一个words.txt文档,里面存放单词及其释意,要求编写一个python程序,实现自动背刺功能:程序开始时,首先随机给用户一个单词和其释义,用户自行选择师是否记住该单词,如果选择记住的话,程序会将该单词标记为需要记忆,在接下来的操作中会继续出现这个单词,直到用户不需要记忆为止;如果......
  • Java环境配置及实战一个Java应用程序
    【前言】在开始编写Java应用程序之前,需要先进行Java环境的配置。本文将介绍如何配置Java环境,并展示一个简单的Java输出示例。读者可以通过本文了解如何正确配置Java环境以及编写并运行Java代码。【摘要】本文将展示如何配置Java环境,并编写一个简单的Java输出示例。通过该示例,读者......