微信小程序循环数组展示数据点击当前改变当前按钮状态

最新推荐文章于 2024-03-21 16:56:55 发布
最新推荐文章于 2024-03-21 16:56:55 发布
阅读量1.4k 收藏 2
点赞数
原文链接：http://www.cnblogs.com/lgarden/p/11490007.html
版权
本文介绍了如何在微信小程序中利用数组循环展示数据，并实现点击当前项时改变按钮的状态。通过实例代码解析了具体的实现过程。
摘要由CSDN通过智能技术生成

Html:

<view class="container" wx:for="{ {arr}}" wx:key="*"> //这里循环数组
<view class="content">{ {item.content}}</view>
<view class="btn">
<image src="../../images/me.png" wx:if="{ {item.status==true}}" data-index="{ {index}}" bindtap="statusClick"></image>
<image src="../../images/me1.png" wx:if="{ {item.status==false}}" data-index="{ {index}}" bindtap="statusClick"></image>
</view>
</view>
 
Css:
.container {padding: 0 30rpx; box-si
最低0.47元/天 解锁文章
a43445311
关注
微信小程序开发中的数据筛选和搜索功能
m0_72166538的博客
05-02 247
综上所述，通过以上步骤，我们可以实现微信小程序开发中的数据筛选和搜索功能。当用户选择筛选条件或者输入搜索关键字时，会根据条件对数据进行筛选或搜索，并实时更新页面中的展示数据。这样，当用户点击 "筛选" 按钮时，会根据当前的筛选条件对数据进行筛选，并更新页面中的展示数据。这样，当用户在输入框中输入搜索关键字时，会根据关键字对数据进行搜索，并更新页面中的展示数据。在微信小程序开发中，实现数据筛选和搜索功能可以通过以下步骤进行。方法中，我们可以根据用户输入的搜索关键字，使用。中，我们可以根据用户输入的值，更新。
微信小程序循环数组+删除
weixin_48912846的博客
02-20 1372
//通过插值表达式{{}}，可以执行显示data里面的数据 //view组件，相当于html中的div标签 //wx:for指令用于循环数组数据，生成组件，item就是循环出来的每一项，index是每一项对应的索引。item和index可以重命名，方式是wx:for-item="xxx" wx:for-index="xxx" <view> <view class="flex j-s a-c" wx:for="{{goodList}}" wx:for-index="goods" wx:fo
微信小程序遍历改变当前按钮状态
Smile_ping的博客
06-12 2694
微信小程序多个button同一事件操作 遍历未知个数button中，如何改变当前所点击按钮的状态，或修改button文本 introduce 遍历button，在button上绑定事件 点击当前button时禁用，或修改样式 如果后台没有返回数据中没有 标识禁用属性 可自行添加 wxml <view wx:for="{{list}}" wx:key="*this"> &...
小程序循环列表，点击只让当前项展开
c_qianxia5040的博客
04-16 342
查看详情 收起 // 展开 extand(e) { let id = e.currentTarget.dataset.id let arrayItem = this.data.msgList; for (let item of arrayItem) { let index ...
微信小程序选项卡数组列表单项选择切换效果
anLazyAnt_懒蚂蚁
05-18 6623
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图：wxml:<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem">
微信小程序开发之——改变Button的状态
我的博客
11-29 1286
一 状态对比 Normal状态 Warn状态 二 示例 2.1 布局文件(button.wxml) <button type="{{isactive?'primary':'warn'}}" bindtap="buttonClick">{{isactive?'确认':'取消'}}</button> 2.2 逻辑文件 Page({ data: { isactive: true }, buttonClick() { this.setD
微信小程序如何从数组里取值_微信小程序数据存储与取值详解
weixin_39708737的博客
12-22 3819
在小程序开发的过程，经常要需要这个页面输入的数据，在下一个页面中进行取值赋值。比如：在A页面input输入框，输入电话号码，点击添加。需要在B页面电话区域中，显示刚刚输入的电话号码。因为这是两个页面，就需要先存储，再取值。微信小程序提供了数据存储的API，wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中，如果重复会覆盖掉原来该 key 对应的内容。思路是，在...
微信小程序常用赋值方法小结
10-17
在微信小程序中进行数据赋值是一个非常基础且重要的操作，它涉及到小程序的视图更新和数据交互。本小结将详细介绍微信小程序中的几种常用赋值方法，包括局部变量、全局变量以及data对象属性的赋值方法，并通过实际...
微信小程序使用for循环动态渲染页面操作示例
10-17
为了实现这一目的，微信小程序提供了数据绑定和模板渲染的机制，其中for循环是实现动态渲染的关键技术之一。 首先，我们来看看微信小程序的wxml（WeiXin Markup Language）部分。wxml是微信小程序的标记语言，它是...
微信小程序 for 循环详解
12-28
1，wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例如下： wxml文件: {{index}}: {{item:one}} js文件： Page({ items:[{ one: test1, },{ one: test2 }] }) 可以使用wx:for-item指定数组当前元素的变量名 可以使用wx:for-index指定数组当前下标的变量名，事例如下： wxml文件：
小程序点击按钮for循环view加1，for循环内的下拉框选择互不影响
08-01
小程序使用for循环点击按钮 view+1，for循环内使用下拉框，互不影响，可单独选择。
微信小程序--数组和对象循环
weixin_43794332的博客
02-02 5011
列表循环 wx:for="{{数组或者对象}}" wx:for-item="循环项的名称“ wx:for-index="循环项的索引“ js文件中： Page({ /** * 页面的初始数据 */ data: { list:[ { id:0, name:"a" }, { id:1, name:"b" }, { id:2, name:"c" } ] }, <!--pages/demo0/demo0.wx
JS 循环数组
weixin_59727199的博客
03-16 1085
JS 数组循环，优缺点
微信小程序 - 循环
最新发布
m0_52163529的博客
03-21 2100
前端代码编写中，循环的使用是必不可少的，只要有相似内容的列表存在，大概率就会使用到循环，如：商品列表、每月收益、排行榜等。
小程序循环数据点击动态切换样式
Zz_Qdm的博客
03-24 299
【代码】小程序循环数据点击动态切换样式。
微信小程序——for循环遍历
weixin_58963766的博客
07-09 3403
以components中创建的ForComp 和pages中的features为例。
【微信小程序】动态改变循环按钮的样式
牛哞哞杂记
02-05 1262
需要做出的效果： 总之，需要做出的效果是，在循环显示的按钮中，我单独点击一个按钮，这个按钮的颜色会改变 思路： 获取循环的下标，再通过下标去修改按钮的颜色 代码： <!-- index.wxml --> <view class="{{current_score === index?'clicked':'score'}}" data-key='{{index}}'&gt...
微信小程序循环列表实现单个显示与隐藏
热门推荐
mentalitys的博客
10-30 1万+
实现多列数据显示和隐藏，效果图 由于小程序不支持dome操作，因此使用 wx:for 方法实现效果 wxml： &lt;!-- searchArray 循环遍历的对象 wx:for-item="item" 别名item bindtap='showList' 绑定点击事件 data-id='{{item.id}}' 将对象id添加到点击列表上 --&gt...
微信小程序多选删除列表数据实操教程
在微信小程序开发中，实现多选删除列表数据是一个常见的交互需求，本文将为你展示如何通过代码来实现这一功能。首先，我们理解一下需求：用户在列表中可以进行多选操作，选择的项目会被标记，并允许用户批量删除已...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值