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

最新推荐文章于 2022-11-20 19:31:22 发布
最新推荐文章于 2022-11-20 19:31:22 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： 小程序练习 文章标签： 小程序点击循环列表的某项添加样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41173321/article/details/92816952
版权

效果
在这里插入图片描述

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

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

前端开发1009
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序 wx:for 为每个循环出来的view，添加相同的动画，并且互不影响
ITLISHUANG的博客
04-22 2621
写在前：想实现通过wx:for 为每个循环出来的元素添加动画，并且动画之间互不影响，自定义写法 描述：添加多个地址，想要删除其中的任意一个的时候有一些动态效果，向左后向右滑动删除 复现第一步：首先是静态页面布局和一些简单的样式 <!-- 因为数据是渲染的所以，所以如果你只复制html 到你的项目将什么都不显示 --> <view class="addbox"> ...
微信小程序for循环的数据每项添加编辑和删除操作
m0_60662967的博客
04-15 1345
1.代码中写出样式，展开的内容用if绑定上checkedall 2.点击小图标时候，图标进行变化（展开收起） 3.获取数据的方法 map（转换）每一项都有每一项的删除/编辑等，如果不写的话点击一处会显示所有行的班级/删除 ...
微信小程序，循环下拉列表，点击时只展开其中一个
Carina的编程技术博客
07-31 4900
微信小程序，循环下拉列表，点击时只展开其中一个 这是效果 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 1721
1.wx:if 1、wx:if 作用在wxml中控制控件是否显示，页面渲染时仅做一次判断渲染（不会根据if内的数据更新而重新刷新控件是否显示） wx:if wx:elif wx:else的用法https://blog.csdn.net/qq_43379916/article/details/94732997 wx:if 与hidden的区别https://blog.csdn.net/weixin_41883384/article/details/81117420 2.wx:for wx...
微信小程序开发——wx:for形成列表，获得item信息
A Lonely Potatoe
12-27 1729
1.获得循环下标 首先，从wx:for的定义所在行处，获得此次循环的下标 解释：起作用的是wx:for-index="categoryIndex" 利用wx:for-index可以得到此次循环的下标，再利用该语句，就可以将下标存在变量categoryIndex中。 （其实相当于categoryIndex=index，但由于微信开发的语法结构，只能用上面那么写） 2.item中设置监听...
小程序wx:for循环多条数据只显示固定条数
C_TopTopTop的博客
06-12 4943
十条数据只显示前三条 <block wx:for='{{list}}' wx:key wx:if="{{index<3}}"></block>
微信小程序wx:for循环获取点击的第几个列表
最新发布
m0_54585610的博客
11-20 1267
注：data-index="{{index}}" 必须在绑定 bindtap 点击事件的 view 才能生效。在 wx:for 循环中添加 data-index="{{index}}"带参数跳转采购详情页面
小程序之wx:for通过data自定义标签传值和setData的使用
weixin_34357962的博客
05-24 1066
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列表中点击行的信息 】
咕噜
01-23 975
【参考：】 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 326
wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名， wx:for-index 可以指定数组当前下标的变量名： //index.js array: [{ message: 'fo...
微信小程序wx：for给每一个元素加事件，并获取元素内容
baidu_33548663的博客
07-20 6967
首先是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 5601
<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 3625
分两种（主要是运用到了三元表达示） 一、在view中循环了个radio： wxml: &lt;radio-group class="radio_group" bindchange="radioCheckedChange" name="answer1"&gt; &lt;view wx:for="{{item.detail}}" wx:key="{{id}}&quot
微信小程序循环列表添加默认事件，默认样式，点击后修改样式
Martin 的博客
11-03 3235
第一个图：就是下拉抽屉层里面的一个列表数据展示。 wx:for="数据源"，data-select="本列表选中的" class="三元表达式。  ds_service_select 默认赋值为空"如果当前 选中的值等于就是采用 current样式  反之为空   bind:tap  后台函数获取前台选中的 第二个图：后台返回的json里面第一项增加一项  主要就是 unshif 操作
微信小程序开发——wx:for循环渲染元素如何修改点击样式
热门推荐
前端专栏
04-06 1万+
循环渲染的导航栏，每个子元素都需要通过点击事件函数修改样式，但因为循环渲染，每个子元素的点击事件函数是一样的，所以不能分别修改对应子元素的样式。通过本文，你将了解微信小程序中循环渲染wx:for的子元素如何修改点击样式
微信小程序单选问题，可取消选中问题（当选项为必填项的时候）
qq_45366081的博客
12-07 3319
1.最近在做小程序端单选框，但是由于不是必选项，所以用户可以在其点击选项当中再点击就可取消选中。直接贴出wxml。 <radio-group class="flex paddingTop block" name="moneyChildrenOne" bindchange='childOnetrue'> <label class="flex al...
小程序 之radio按钮选中事件
gyueh的博客
04-07 6362
要求： 默认不选中，当选中出口时，显示港口类型 初始效果： 1.xml部分代码如下 <view class="weui-flex"> <view class="weui-flex__item"> <view class="placeholder"> <view class="wehx-custom_title">进出口类型</vi...
仿写小红书小程序踩坑记：开发工具与技巧分享
- 在`scroll-view`内，使用`view`组件并结合`wx:for`指令循环渲染导航项，同时设置`bindtap`事件监听用户点击。 - 为了使导航条横向滑动，每个`view`需设置固定宽度，并确保总宽度小于`scroll-view`的宽度。 3. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值