微信小程序实现简单的点击切换功能(微信开发者工具)

简介: 微信小程序实现按钮切换功能

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

如图下

📋wxml代码

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

image.gif

📋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;
}

image.gif

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

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

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

image.gif

📋wxml代码

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

image.gif

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

🔗使用bindtap绑定事件

事件的使用方式

  • 在组件中绑定一个事件处理函数。

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

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


    • 在相应的Page定义中写上相应的事件处理函数,参数是event。
    Page({
    tapName: function(event) {
    console.log(event)
      }
    })

    image.gif

    📋最后效果

    image.gif

    目录
    相关文章
    |
    1月前
    |
    存储 JSON 小程序
    微信小程序入门之新建并认识小程序结构
    微信小程序入门之新建并认识小程序结构
    50 1
    ly~
    |
    2月前
    |
    存储 供应链 小程序
    除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
    除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
    ly~
    78 6
    |
    16天前
    |
    小程序 数据挖掘 UED
    开发1个上门家政小程序APP系统,都有哪些功能?
    在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
    |
    30天前
    |
    存储 自然语言处理 小程序
    微信小程序多语言切换神器:简繁体切换功能完全指南
    随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
    83 0
    微信小程序多语言切换神器:简繁体切换功能完全指南
    |
    1月前
    |
    小程序 JavaScript API
    微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
    这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
    524 0
    微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
    |
    1月前
    |
    小程序 数据可视化 数据管理
    小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
    小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
    40 3
    |
    1月前
    |
    移动开发 小程序 数据可视化
    微信小程序可视化开发工具之动态数据
    微信小程序可视化开发工具之动态数据
    39 3
    |
    1月前
    |
    小程序 Linux Python
    查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
    查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
    |
    3月前
    |
    人工智能 小程序 Java
    【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
    本文介绍了一款名为PyWxDump的开源工具,它可以获取微信账户信息、解密SQLite数据库以查看和备份聊天记录。此工具适用于已登录电脑版微信的用户,通过GitHub下载后简单几步即可操作。适合对数据恢复感兴趣的开发者,但请注意合法合规使用并尊重隐私。
    489 2
    【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
    |
    1月前
    |
    小程序 前端开发 数据可视化
    微信商城小程序WeiMall
    微信商城小程序WeiMall
    32 0