微信小程序怎么在wx：for中，选中的item更改背景色

最新推荐文章于 2024-07-10 21:32:33 发布

woliwa1

最新推荐文章于 2024-07-10 21:32:33 发布

阅读量1.1k

点赞数

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/woliwa1/article/details/105735298

版权

怎么在wx:for item中选中的item改变背景色？
在class 中加判断
class=“normal {{currentId === itemId ? ‘bgcClassName’ : null}}”

注意：bgcClassName 一定要带单引号，不然没效果！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

woliwa1

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 三元运算符点击循环列表中的某一项切换颜色进行参数携带（原创）

weixin_40291248的博客

05-07

3201

先上效果图整体思路大概是：wx:for循环出你的list 每个list有单独的id 点击事件bindtap用三元运算符判断id是否相等，然后js里u_current只要相等就增加一个active，参数携带都在e.currentTarget 里面 wxml代码 <scroll-view class="pup_bottom" ...

微信小程序（下）

最新发布

m0_46702681的博客

03-30

1972

rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)在较小的设备上，1rpx所代表的宽度较小在较大的设备上，1rpx所代表的宽度较大小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

参与评论您还未登录，请先登录后发表或查看评论

小程序 循环数据点击背景色改变和发生的各种问题与解决办法

qq_39636712的博客

12-09

854

场景：小程序展示品牌列表，当点击某一个品牌时，背景色发生改变。 1、确认数据，因为没有与后台发生交互，所以先准备一下数据。 data: { brand_data:[ {'logo':'/images/dazhong.png','name':'大众','id':'123','brandBack':'FFFFFF','zIndex':-1}, {'logo':'/images/bmw.png','name':'宝马','id':'124','brandBack':'FFFFF

小程序实现循环列表，改变点击的背景色

c_qianxia5040的博客

04-05

446

<view class="tagItem {{key===index?'btnBg':''}}" data-index="{{item.id}}" wx:for="{{dpTagList}}" wx:key="index" bindtap="chooseTag">{{item.name}}</view> // 选中标签变背景色 chooseTag(e...

问答《三十九》循环列表点击时改变当前项的背景颜色

03-29

问题：wx.requset请求出错net::ERR_CONNECTION_RESET 源代码如下： wx.request({ url: 'https://www.dinggestyle.com/API/GetOrgList', data: { OrgType: 0 }, method: 'GET', success: function (res) { ... 问题：wx.requset请求出错net::ERR_CONNECTION_RESET 源代码如下： wx.request({ url: 'https://www.dinggestyle.com/API/GetOrgLis

微信小程序中的循环列表，在点击时改变当前项的背景颜色

Chertuion的博客

05-27

2万+

之前自己在网上找这个功能时，花了我大量的时间也没找到好一点的方法，于是我自己想出了一个解决方案，不知道其是否实用，反正先放出来，如果有不对的地方请指出。菜鸟一个，求带！废话不多说，我就直接上demo图：我们看到代码我们先给我们的主界面设置两个区域块left_menu 和 right_content .left_menu: 我们通过wx:for 来遍历我们穿过来的数据。并给我们的view绑定一个

微信小程序实现多选框全选与取消全选功能示例

10-17

在微信小程序中，实现多选框（Checkbox）的全选与取消全选功能是一项常见的需求，主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript（JS）、WXML（微信小程序的XML标记语言）和WXSS（微信小程序的CSS...

微信小程序（三）

JUSNYA的博客

10-06

1305

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网1.什么是样式导入使用WXSS提供的@import语法，可以导入外联的样式表。页开发中的CSS。

【愚公系列】《微信小程序开发解析》006-视图容器组件

热门推荐

时光隧道

07-10

6万+

在微信小程序开发中，视图容器组件是构建用户界面的基础模块。它们不仅用于布局和组织页面内容，还能实现许多复杂的交互效果。无论是简单的页面布局，还是复杂的界面设计，视图容器组件都扮演着不可或缺的角色。本篇文章将深入探讨微信小程序中的视图容器组件，详细介绍其主要类型、使用方法以及在实际开发中的应用场景。我们将通过实例代码，帮助大家快速掌握这些组件的使用技巧，提高开发效率。同时，还会分享一些常见问题的解决方案以及最佳实践，希望能对各位开发者有所帮助。

微信小程序（五）购物车

zhoulina815的博客

04-06

7990

微信小程序（五）购物车

小程序 点击改变单页面背景色

qq_56303170的博客

11-25

794

点击改变页面的背景色 要求：当前页面的背景色为#ffffff，当点击按钮的时候，背景色变为#f3f3f3 问题：页面的背景色是绑定在page上的，但是我们编写的wxml中没有page标签思路：给最外层的view标签设置最小高度——整个屏幕在page的data配置中设有bgColor，当点击按钮时，改变view标签的背景色 <view class="container" style="background-color:{{bgColor}}"> <button bindtap="

微信小程序中，点击wx:for渲染的数据，view里的文字颜色改变、展示不同的内容

weixin_44704285的博客

03-15

5491

用wx:for渲染数据，不确定有多少条数据，要使得点击当前数据获取当前数据的下一级数据，描述可能会不太清楚，就是实现图中这种功能： wxml代码： &lt;!-- 这是要展示的规格 --&gt; &lt;view wx:for="{{items}}" wx:key="id" bindtap='selShopTc' data-index="{{index}}&

【微信小程序】—— wxml中使用wx:for时，修改页面中data内数组中的单个值，实现选中效果

LimonSea的博客

08-17

7505

这个不算坑，但是为了保证一致性。。题目就这样吧嘿嘿~ 未点击时：点击后：再次点击又会隐藏，只做了第一个，其他相同前端代码：使用wx:for，给image的src属性用了三项运算符，当我把isSelect改成true时，前面的小图标换了一下，隐藏的模块用的hidden wxml：  &lt...

小程序如何获取wx:for列表中点击行的信息？

厦门在乎科技

07-01

816

1.如果想要获取点击行的索引(即for循环数组的索引) <view class='chooseTitle'> <view class='choose' wx:for="{{monArray}}" wx:for-index="bindex" wx:key="item.id"> <view class="itemName" bindtap='switchTab' data-bindex='{{bindex}}' data-id='{{item.id}}'&

微信小程序实现 item点击变色的多种方式

我们好像在哪见过

11-04

1415

思路1：for循环渲染item给点击的元素添加active标签多个元素使用wxs语法判断 active标签数组中是否存在点击的index思路2：如果只允许同时只存在一个元素变色就不需要使用wxs 直接把{{utility.isActive(salaryState,index)}}改为{{state==index？思路3：如果在2的基础上只需要短暂变色使用微信：hover语法即可。

小程序给wx:for循环的列选中某条添加样式

qq_41173321的博客

06-19

1717

效果一开始想用sceneLoding的true false来控制动画的显示，但是wx:for 循环的出来的都包含此属性，当点击时都会有加载的动画，不是想要的效果。于是换了个思路，获取点击元素的id，再声明个全局变量，点击后吧获取的id传给声明的变量，页面加载时判断如果变量等于当前id就显示动画，否则隐藏 ...

微信小程序wx:for和wx:for-item的正确用法

shiki0083的笔记

06-20

3万+

wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的如果是一维数组,按照如下方式循环出来：```<view wx:for="{{list}}">{{index}} {{item.name}}</view>```以上代码中，item即为list的别名。如果是二维甚至多维数组，按照如...

微信小程序底部Tab选中效果实现教程

在本次的微信小程序练习demo中，我们主要学习和实践的是微信小程序中底部3个tab的制作和实现选中时文字和图片改变的功能。首先，我们需要了解微信小程序的结构。微信小程序主要由三种文件组成，即JSON配置文件、...