小程序动态修改循环中的样式

图标样式等，请参考Color-UI

WXML

<view class="cu-list menu"><block wx:for='{{typelist}}' wx:for-index='index' wx:key wx:for-item='item'><view class="cu-item "><view class='content' bindtap='showChildren' data-index='{{index}}'><text class='{{item.icon}}'></text><text class="icon-comment text-pink "></text><text class="text-grey">{{item.name}}</text></view></view></block>
</view>

data: {typelist: [{id: '1',name: '查看',level: 0,icon: 'icon-right',}, {id: '2',name: '打开',icon: 'icon-right',}, {id: '2',name: '关闭',icon: 'icon-right',}],},showChildren(e) {var index = e.currentTarget.dataset.index //获取当前下标var number = this.data.show;for (let i in this.data.typelist) {// 遍历 修改当前箭头方向if (i == index) {if (this.data.typelist[i].icon == 'icon-right') {var icon = 'typelist[' + i + '].icon'this.setData({[icon]: 'icon-unfold'})} else if (this.data.typelist[i].icon == 'icon-unfold') {var icon = 'typelist[' + i + '].icon'this.setData({[icon]: 'icon-right'})}}}},

点击某一个之后

我是参考了
https://blog.csdn.net/qq_39635610/article/details/86542387?tdsourcetag=s_pcqq_aiomsg
这位博主的博客才做出来哒~~

小程序动态修改循环中的样式相关推荐

微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
小程序 rich-text 修改图片和文字样式
小程序 rich-text 修改图片和文字样式 utils文件 /*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style ...
小程序如何修改缓存中的某一个字段的值；小程序中如何应用vant组件如：van-dropdown-item、van-field
1.小程序如何往缓存中存数据将数据放入指定缓存中. 这里缓存块的名称叫'mydata',你可以根据自己的需求,取合适的名字.代码如下 let data = {name: '8BQ了',age: '1 ...
微信小程序：修改单选radio大小样式
通过scale将其缩小 <radio style="transform:scale(0.8)" checked="true" value="tr ...
微信小程序动态修改数据 list展示
前沿我想实现一个动态修改data内数据的功能,试验了几种方式,感觉下面的这种方式最实用,所以记录一下.方便后面的小伙伴来学习. 代码 js文件代码:Page({data: {artlist: []} ...
微信小程序动态修改颜色
在h5中可以用js根据id啊.class啊等等找到控件,然后.css 但是在小程序中没有,小程序是数据绑定的模式,style也可以这样写 1,在data中定义变量color data: {color: ...
小程序动态修改二维数组示例
♩. 背景个人的项目中,在进行用户地址的删除操作时,我需要动态隐藏已经删除掉的地址毕竟小程序的 JS 跟我们前端接触的 JavaScript 代码有很大的不同 ♪. 思路设计我的想法是: 1.首 ...
微信小程序自定义修改swiper指示点样式
最近要用到微信小程序,于是就以CSDN的CSDN会员小程序作为练手案例,但是当我在使用官方的Swiper组件时发现,官方的指示点和我想要的效果不一致.于是,经过各种找资料,最终发现了解决方法. 官方的 ...
微信小程序动态修改页面标题title
背景有这样一个需求,想动态修改微信小程序页面顶部的标题,应该如何操作呢? 做法一.首先看看静态修改微信小程序页面顶部的标题的做法. 通过修改页面json文件即可修改页面标题 {"navi ...

小程序动态修改循环中的样式

图标样式等，请参考Color-UI

小程序动态修改循环中的样式相关推荐

最新文章

热门文章