微信小程序中多个button/view组件中进行切换时改变样式

最新推荐文章于 2023-03-11 11:35:58 发布
最新推荐文章于 2023-03-11 11:35:58 发布
阅读量5.8k 收藏 3
点赞数
分类专栏： 微信小程序开发 微信小程序 文章标签： 微信小程序开发 微信小程序开发教程 小程序开发文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38125123/article/details/75271601
版权
本文介绍在微信小程序中如何实现在多个button或view组件间切换时改变其样式。通过修改.wxml、.wxss和.js文件，详细讲解了一种简易实现方法，适用于小程序中分组切换场景，提供了具体的代码示例。
摘要由CSDN通过智能技术生成

微信小程序中多个button/view组件中进行切换时改变样式开发具体教程:

1、微信小程序| 多个按钮或VIEW，点击改变状态 简易的实现方法

.wxml文件

 
  1. [html] view plain copy
  2. <view class="chose-txt" data-price="{ {item.price}}" data-id="{ {index}}" bindtap="choseTxtColor" style="{ {index == id?'background:url(../resource/button/on_chose.png) right no-repeat; border:1rpx solid #e8580c; color: #e8580c':'baciground:url();border:1rpx solid gainsboro;color:gray'}}">
  3. <text class="chose-p"
最低0.47元/天 解锁文章
第九程序
关注
专栏目录
微信小程序开发中的多页面切换与跳转
wx_linying1029的博客
07-31 341
首先，在wxml文件中添加一个列表，然后通过绑定列表点击事件，在对应的js文件中处理列表点击事件，并在事件处理函数中获取当前点击的项的数据，然后调用微信小程序提供的页面切换API实现页面切换。首先，在wxml文件中添加一个按钮，然后通过绑定按钮点击事件，在对应的js文件中处理按钮点击事件，并在事件处理函数中调用微信小程序提供的页面切换API实现页面切换。页面的文件路径是指页面文件在小程序项目中的相对路径，页面的路径参数是指通过URL参数的形式传递给页面的参数。可以设置页面切换的动画类型、动画时长等参数。
微信小程序 | 多个按钮或VIEW，点击改变状态 简易的实现方法
kelisentian的博客
05-28 3万+
实现效果： 背景图片： .wxml文件 {{item.name}} {{item.price}}元 样式都在这个文件中写了，CSS只是控制布局 .wxss文件 .chose-txt{ border-radius: 6px; font-si
小程序实现多个按钮点击跳转动态更换样式
小白的博客
07-23 357
.swan页面代码：判断index与currentIndex的值是否相同，相同的话就绑定.active,不同的话就不绑定该样式 <view class="fourBtns"> <view s-for="item,index in fourBTN" bindtap="itemClick" data-idx='{{index}}' class="fourBtn {{index==currentIndex?'active':''}}"> .
微信小程序实现 item点击变色的多种方式
最新发布
qq_65201988的博客
03-11 4981
微信小程序实现 item点击变色的多种方式
微信小程序实现点击按钮后修改颜色
10-15
通过学习这个示例，开发者可以了解到微信小程序中的数据绑定、事件处理和样式修改等基础知识，这对于开发微信小程序应用至关重要。在实际开发中，开发者可以根据需求调整颜色值和样式，以实现更丰富的交互效果。同时...
微信小程序的的各种实战演示
01-27
MyJobs_WeChat 微信小程序的的各种实战demo如果你觉得我的实战demo对你有所帮助，...微信小程序--多个button/view组件行切换时改变样式 实现了购物车的尺寸或是型号选择（不可选、可单选） 微信小程序--获取验证码 实现
【微信小程序】实现页面tab切换效果
yzq0820的博客
09-23 6376
本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！本次效果展示。这里有一个大坑，不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列（这里我们只关注scroll-x、scroll-y）
微信小程序 点击按钮切换页面
潮湿的桥
06-26 1万+
微信小程序中，按钮也是标签，它通过bindtap属性绑定点击事件： 然后在js里面注册这个回调函数： 回调函数里面通过 wx.navigateTo({ url: ‘/pages/index/talkPage’, })跳转到talkPage界面。 注意，html界面要在app.json里面注册： 不注册的话会报错：navigateTo:fail url “pages/index/talkPage” ...
【微信小程序】基础篇 -- 自定义组件 -- 创建与引用 &样式（三十二）
JMFive的博客
03-10 5975
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第32篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序：多个button/view组件行切换时改变样式
Jane's Blog
03-20 5148
微信小程序中多个button/view，点击后改变状态或样式，并拿到对应参数值。该类似需求情境适用：选择购物车的尺寸或是型号（不可选、可单选）、选择套餐（单选）、选择分组（单选）等等 按照需求布局，根据数组list循环，通过if语句条件渲染，展示对应样式，其中view可换成button。 &lt;view class="container"&gt; &lt;block wx:fo...
微信小程序按钮Button使用详解
代码小疯子
12-03 2万+
微信小程序 按钮 button
微信小程序开发——动态改变按钮背景颜色
k1ttyLove的博客
03-26 1万+
微信小程序开发，动态改变控件背景色等样式。
微信小程序点击控件修改样式
热门推荐
生如夏花 炫至茶靡
06-30 5万+
现在要在微信小程序中实现点击控件修改样式，如下： 微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。 第一步：在wxss中定义被点击和未被点击的样式，如下： .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002
微信小程序实现循环的Button动态点击改变字体颜色
青春勿完美的博客
07-19 1万+
                                                   微信小程序之实现循环的Button的动态点击改变字体颜色效果! 近日，在实现一个微信的小程序的点击标识功能，百度发现小程序好像不支持dom操作,无奈只能另寻它法。 JS文件 Page({ data: { selects: ['选择1', '选择2', '选择3', '选择4...
微信小程序实现多级联动展开/收起列表实例
在微信小程序开发中，实现一个多层展开/收起的列表功能是一项常见的交互需求，对于前端小白或刚接触小程序的开发者来说，理解并掌握这一技巧能够提升他们的实践能力。本文将详细介绍如何通过WXML和WXSS编写代码来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值