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)}   

}

}),

结果:

开始页面

点击开始后页面

点击停止后页面