📚文章目录

🔗首先创建一个简单的切换按钮📋

如图下

📋wxml代码

📋wxss代码

🔗但是这个元素是无法点击的，所以要添加一个点击事件到这两个元素里面

📋js代码(在page({})里面添加)

📋wxml代码

🔗class使用三元表达式来继续点击判断

🔗使用bindtap绑定事件

事件的使用方式

📋最后效果

最后祝读者五一假期愉快🎉

🔗首先创建一个简单的切换按钮📋

如图下

📋wxml代码

<view>--------切换测试-----------</view><view class="chose"><view class="box1">点击切换1</view><view class="box2">点击切换2</view></view>

📋wxss代码

.chose{display: flex;background-color: #e7e2e2;width: 400rpx;height: 80rpx;text-align: center;border-radius: 67rpx;line-height: 74rpx;}.chose>view{width: 200rpx;flex: 1;}.box1{background-color: #666;color: #fff;border-radius: 67rpx;}

🔗但是这个元素是无法点击的，所以要添加一个点击事件到这两个元素里面

📋js代码(在page({})里面添加)

Click1(){this.setData({num:1})},Click2(){this.setData({num:2})}

📋wxml代码

<view class="chose"><view class="{{num==1?'box1':''}}" bindtap="Click1">点击切换1</view><view class="{{num==2?'box1':''}}" bindtap="Click2">点击切换2</view></view>

🔗class使用三元表达式来继续点击判断

🔗使用bindtap绑定事件

事件的使用方式

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({tapName: function(event) {console.log(event)}})

📋最后效果

最后祝读者五一假期愉快🎉