5-微信小程序 点击事件

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)

}   

}

}),

结果：

开始页面

热门相关：我有一座冒险屋   重生之将门毒后   我是仙凡   紫府仙缘   慕少，你老婆又重生了