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

如图下

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

 ?最后效果

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