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

最新推荐文章于 2025-04-10 21:55:06 发布

moopal

最新推荐文章于 2025-04-10 21:55:06 发布

阅读量3.1w

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/kelisentian/article/details/72793158

版权

本文介绍了如何在微信小程序中通过简单的步骤，实现多个按钮或VIEW组件的点击状态切换，包括背景图片的变化，提供了.wxml文件的相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

背景图片：

.wxml文件

<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'}}">
                <text class="chose-p" >{
  {item.name}}</text>
                 <text class="chose-p" >{
  {item.price}}元</text>
            </view>
            </block>