微信小程序中多个button/view组件中进行切换时改变样式_微信小程序控制按钮切换当前显示区域 - CSDN文库

5星 · 超过95%的资源 107 浏览量更新于2023-05-03 评论 1 收藏 75KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

微信小程序 | 多个按钮或VIEW，点击改变状态简易的实现方法实现效果：背景图片：.wxml文件view

plaincopyviewclass="chose-txt"data-price="{{item.price}}"data-id="{{index}}"bindtap="choseTxtColor"style="

{{in ...

1、1、微信小程序微信小程序 | 多个按钮或VIEW，点击改变状态简易的实现方法 | 多个按钮或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" >{{item.name}}</text>

4. <text class="chose-p" >{{item.price}}元</text>

5. </view>

6. </block>

样式都在这个文件中写了，CSS只是控制布局

.wxss文件

1. [html] view plain copy

2. .chose-txt{

3. border-radius: 6px; font-size: 26rpx; height: 40px; width: 27.5%; margin: 5px; float: left;padding-top: 5px;

4. }

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论10

好运爆棚

2023-06-17

这个方法在自己的项目中尝试过，效果非常好。

weixin_38716590

粉丝: 4
资源: 914

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈