小程序给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 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序点击循环列表的某项添加样式

博客围绕小程序点击循环列表某项添加样式展开。起初想用sceneLoding的true或false控制动画显示，但wx:for循环出的项都有此属性，点击时都会显示动画，不符合需求。后来换思路，获取点击元素id，用全局变量接收，页面加载时根据变量与当前id是否相等来显示或隐藏动画。

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

效果
在这里插入图片描述

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

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

小程序 wx:for 为每个循环出来的view，添加相同的动画，并且互不影响
ITLISHUANG的博客
04-22 2692
写在前：想实现通过wx:for 为每个循环出来的元素添加动画，并且动画之间互不影响，自定义写法 描述：添加多个地址，想要删除其中的任意一个的时候有一些动态效果，向左后向右滑动删除 复现第一步：首先是静态页面布局和一些简单的样式 <!-- 因为数据是渲染的所以，所以如果你只复制html 到你的项目将什么都不显示 --> <view class="addbox"> ...
微信小程序for循环的数据每项添加编辑和删除操作
m0_60662967的博客
04-15 1417
1.代码中写出样式，展开的内容用if绑定上checkedall 2.点击小图标时候，图标进行变化（展开收起） 3.获取数据的方法 map（转换）每一项都有每一项的删除/编辑等，如果不写的话点击一处会显示所有行的班级/删除 ...
微信小程序，循环下拉列表，点击时只展开其中一个
Carina的编程技术博客
07-31 4997
微信小程序，循环下拉列表，点击时只展开其中一个 这是效果 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 1801
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 5146
十条数据只显示前三条 <block wx:for='{{list}}' wx:key wx:if="{{index<3}}"></block>
微信小程序wx:for循环获取点击的第几个列表
m0_54585610的博客
11-20 1478
注：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 6769
wx:for使用以及使用wx:key注意事项
微信小程序【 获取wx:for列表中点击行的信息 】
咕噜
01-23 1089
【参考：】 https://www.cnblogs.com/androidxufeng/p/9342105.html 【解决：】 wxml: <view wx:for="{{listone}}" wx:key="index" bindtap="listgetone" data-item="{{item}}" > </view> js： listgetone(item){ console.log(item) console.log(item.currentTarget.da
小程序视图层之WXML---列表渲染
教官的博客
11-12 392
wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名， wx:for-index 可以指定数组当前下标的变量名： //index.js array: [{ message: 'fo...
wx:for 循环获取下标的方法
qq_41183241的博客
09-06 9929
今天碰到个非常蠢的坑，从17点一直弄到了凌晨1点才弄好，就只是一个非常非常基础的错误。 从数据库获取数据后上传到数组，然后渲染到页面，获取渲染好的数组下标。 <block wx:for="{{teeData}}" wx:key="tee_key"> <van-card num="{{item.num}}" tag="{{item.tag}}" ...
微信小程序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 6418
<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){ .
微信小程序开发——wx:for循环渲染元素如何修改点击样式
热门推荐
前端专栏
04-06 1万+
循环渲染的导航栏，每个子元素都需要通过点击事件函数修改样式，但因为循环渲染，每个子元素的点击事件函数是一样的，所以不能分别修改对应子元素的样式。通过本文，你将了解微信小程序中循环渲染wx:for的子元素如何修改点击样式
微信小程序中for循环点击后的样式
zhuojun.yu的博客
10-30 3688
分两种（主要是运用到了三元表达示） 一、在view中循环了个radio： wxml: &lt;radio-group class="radio_group" bindchange="radioCheckedChange" name="answer1"&gt; &lt;view wx:for="{{item.detail}}" wx:key="{{id}}&quot
wx:for如何传输点击处item的信息（data-index）
qq_34633111的博客
03-05 3867
小程序用js的数组和wx：for渲染十分方便： wxml: &lt;view class='chooseTitle'&gt; &lt;view class='choose' wx:for="{{timeArray}}" wx:key="item.id"&gt; &lt;view class="itemName" bindtap='switchTab''&gt;{{item..
小程序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、付费专栏及课程。

余额充值