📚文章目录
🔗首先创建一个简单的切换按钮📋
如图下
📋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中找到相应的事件处理函数。文章来源：https://www.toymoban.com/news/detail-484570.html
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
- 在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})📋最后效果
文章来源地址https://www.toymoban.com/news/detail-484570.html
最后祝读者五一假期愉快🎉
到了这里，关于微信小程序实现简单的点击切换功能(微信开发者工具)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
