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

最新推荐文章于 2023-03-05 03:39:46 发布
最新推荐文章于 2023-03-05 03:39:46 发布
阅读量1.7k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序练习 文章标签： 小程序点击循环列表的某项添加样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41173321/article/details/92816952
博客围绕小程序点击循环列表某项添加样式展开。起初想用sceneLoding的true或false控制动画显示，但wx:for循环出的项都有此属性，点击时都会显示动画，不符合需求。后来换思路，获取点击元素id，用全局变量接收，页面加载时根据变量与当前id是否相等来显示或隐藏动画。

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

效果
在这里插入图片描述

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

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

小程序 wx:for 为每个循环出来的view，添加相同的动画，并且互不影响
ITLISHUANG的博客
04-22 2691
写在前：想实现通过wx:for 为每个循环出来的元素添加动画，并且动画之间互不影响，自定义写法 描述：添加多个地址，想要删除其中的任意一个的时候有一些动态效果，向左后向右滑动删除 复现第一步：首先是静态页面布局和一些简单的样式 <!-- 因为数据是渲染的所以，所以如果你只复制html 到你的项目将什么都不显示 --> <view class="addbox"> ...
微信小程序for循环的数据每项添加编辑和删除操作
m0_60662967的博客
04-15 1417
1.代码中写出样式，展开的内容用if绑定上checkedall 2.点击小图标时候，图标进行变化（展开收起） 3.获取数据的方法 map（转换）每一项都有每一项的删除/编辑等，如果不写的话点击一处会显示所有行的班级/删除 ...
微信小程序，循环下拉列表，点击时只展开其中一个
Carina的编程技术博客
07-31 4995
微信小程序，循环下拉列表，点击时只展开其中一个 这是效果 1.wxml <!-- bigwarp --> <view class="dewarp"> <view class='com-selectBox' wx:for="{{detil}}" wx:for-item="item" wx:key=""> <view class='co...
小程序：wx:for wx:if wx:for-item wx:key 及数据列表绑定，点击事件获取数据
v587ge的专栏
05-11 1799
1.wx:if 1、wx:if 作用在wxml中控制控件是否显示，页面渲染时仅做一次判断渲染（不会根据if内的数据更新而重新刷新控件是否显示） wx:if wx:elif wx:else的用法https://blog.youkuaiyun.com/qq_43379916/article/details/94732997 wx:if 与hidden的区别https://blog.youkuaiyun.com/weixin_41883384/article/details/81117420 2.wx:for wx...
微信小程序开发——wx:for形成列表，获得item信息
A Lonely Potatoe
12-27 1867
1.获得循环下标 首先，从wx:for的定义所在行处，获得此次循环的下标 解释：起作用的是wx:for-index="categoryIndex" 利用wx:for-index可以得到此次循环的下标，再利用该语句，就可以将下标存在变量categoryIndex中。 （其实相当于categoryIndex=index，但由于微信开发的语法结构，只能用上面那么写） 2.item中设置监听...
小程序wx:for循环多条数据只显示固定条数
C_TopTopTop的博客
06-12 5144
十条数据只显示前三条 <block wx:for='{{list}}' wx:key wx:if="{{index<3}}"></block>
微信小程序wx:for循环获取点击的第几个列表
m0_54585610的博客
11-20 1475
注：data-index="{{index}}" 必须在绑定 bindtap 点击事件的 view 才能生效。在 wx:for 循环中添加 data-index="{{index}}"带参数跳转采购详情页面
小程序之wx:for通过data自定义标签传值和setData的使用
weixin_34357962的博客
05-24 1133
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', cover: '../../img/mineBG.png' }, { title: '狼图腾', cover: '../../img/mineBG.png' }, ], [ { title: ...
小程序点击按钮for循环view加1，for循环内的下拉框选择互不影响
08-01
1. 在`wxml`中使用`wx:for`循环生成多个包含按钮和下拉框的`view`。 2. 在`js`中定义数据结构，并为按钮点击和下拉框变化事件编写处理函数。 3. 使用`setData`动态更新数据，确保每个`view`的按钮点击和下拉框选择...
微信小程序wx:for 的使用以及wx:key绑定
weixin_43364458的博客
03-05 6763
wx:for使用以及使用wx:key注意事项
小程序视图层之WXML---列表渲染
教官的博客
11-12 388
wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名， wx:for-index 可以指定数组当前下标的变量名： //index.js array: [{ message: 'fo...
微信小程序wx：for给每一个元素加事件，并获取元素内容
baidu_33548663的博客
07-20 7056
首先是wxml &lt;view class='js'&gt; &lt;view wx:for="{{adressMessages}}"&gt;/*这里是元素的内容*/ &lt;text class='diming'&gt;{{item.diming}}&lt;/text&gt; &lt;view class='lines1'&...
微信小程序学习：wx:for获取item下标，并在点击事件bindtap里面返回。
sziitjin的博客
10-28 6411
<view wx:for="{{deliveryManInfo}}" wx:key="index"> 设置wx:key="index"后，view里面可以直接使用index，index则表示每一项的下标，从0开始。 <view data-index="{{index}}" bindtap="choosed"> //在使用bindtap点击事件时，设置data-index，同时赋值index，则可以让点击事件获取对应点击item的下标。 //获取方式 choosed(e){ .
微信小程序中for循环点击后的样式
zhuojun.yu的博客
10-30 3684
分两种（主要是运用到了三元表达示） 一、在view中循环了个radio： wxml: &lt;radio-group class="radio_group" bindchange="radioCheckedChange" name="answer1"&gt; &lt;view wx:for="{{item.detail}}" wx:key="{{id}}&quot
小程序中点击给当前添加active的选中样式
最初都是小白
06-04 6453
在小程序中给一个列表加一个选中样式，效果如下： 如图中当前选中： 综合 代码如下： wxml data-item 是用来传当前位置的，必须要写 <view class="condition-nav" wx:if="{{!historyShow}}" > <view wx:for="{{conditionList}}" wx:for-item="info" data-item="{{info.id}}" wx:key=
微信小程序－wx:for 循环列表
热门推荐
书写人生
05-19 11万+
获取了 N 条信息（具体有多少条不确定），如何在界面中动态呈现出来呢？ .wxml 代码  wx:for="{{items}}" wx:for-index="index" wx:for-item="item"> {{index+1}}、{{item.title}} > 核心代码就是 wx:for，对应一个数组。 而 wx:for-index 指明后面如果要用数组索引的话
微信小程序开发——wx:for循环渲染元素如何修改点击样式
前端专栏
04-06 1万+
循环渲染的导航栏，每个子元素都需要通过点击事件函数修改样式，但因为循环渲染，每个子元素的点击事件函数是一样的，所以不能分别修改对应子元素的样式。通过本文，你将了解微信小程序中循环渲染wx:for的子元素如何修改点击样式
微信小程序点击控件修改样式
生如夏花 炫至茶靡
06-30 5万+
现在要在微信小程序中实现点击控件修改样式，如下： 微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。 第一步：在wxss中定义被点击和未被点击的样式，如下： .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002
小程序for循环实现view+1与下拉框互不影响的操作方法
小程序的wxml模板中提供了wx:for指令用于遍历数组或对象，wx:key指令用于提升列表渲染时的性能。在JavaScript中，可以使用普通的for循环或者for...of循环来迭代数组中的元素。在本例中，for循环可能被用于创建多个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值