🔗首先创建一个简单的切换按钮📋
如图下
📋wxml代码
<view>--------切换测试----------- </view><viewclass="chose"><viewclass="box1">点击切换1</view><viewclass="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代码
<viewclass="chose"><viewclass="{{num==1?'box1':''}}"bindtap="Click1">点击切换1</view><viewclass="{{num==2?'box1':''}}"bindtap="Click2">点击切换2</view></view>
🔗class使用三元表达式来继续点击判断
🔗使用bindtap绑定事件
事件的使用方式
- 在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<viewid="tapTest"data-hi="Weixin"bindtap="tapName"> Click me! </view>
- 在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({ tapName: function(event) { console.log(event) } })
📋最后效果
