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:
{{stuName}}
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)}
}
}),
结果:
开始页面
点击开始后页面
点击停止后页面