微信小程序循环list的img转化

在微信小程序中,由于无法使用选择器,通过循环列表实现图片切换需借助索引。通过设置一个显示/隐藏的变量,并在数组中添加默认类型属性。利用if条件赋值,动态改变item的defaultType,再更新数据到页面。例如:<image src='{{list[index].defaultType? "/images/a.png":"/images/b.png"}}' class="abc"></image>,确保点击时只有当前元素状态改变。
摘要由CSDN通过智能技术生成

因为没法用选择器,现在一个列表是循环出来的,只能通过index来确定,首先定义一个显示/隐藏的变量 x,然后再循环数组里加个新属性defaultType。

    array.forEach((r) => {  //array是循环数组

      r.defaultType = false;   //r = array[0]的所有数据,这样直接 r.新属性 = 属性值 即可

    })

用这个加个数组的临时属性,然后在if里赋值,array[index].defaultType = true;最后

 that.setData({

      list: array

    })

页面上:

     <image src='{{list[index].defaultType? "/images/a.png":"/images/b.png"  }}' class="abc"  ></image></view>

这样点击其中一个元素,其他元素就不会跟着变了。

具体的逻辑大家自己补充哦

参考:https://segmentfault.com/a/1190000009797083icon-default.png?t=L892https://segmentfault.com/a/1190000009797083

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值
>