微信小程序如何循环控制一行显示几个wx:for

article/2025/11/6 3:36:03

在这里插入图片描述
正如上图所显示的一样，我们改如何控制一行显示几个图形呢？
首先第一种方法，数量少的可以自己一行一行的写，但是当数据很多的时候呢？
这时候就需要我们区使用循环进行代码的编写。废话不多数，直接写代码。

.demo-item{
width: 40%;
}
.demo-item .screen-data{
padding: 10rpx;
text-align: center;
}

json文件

{
“navigationStyle”: “custom”,
“navigationBarTextStyle”: “white”,
“usingComponents”: {
“tabchange”: “/components/tabchange/index”,
“search-bar”: “/base-ui/ms-search-bar/index”,
“ms-add-btn”: “/base-ui/ms-add-btn/index”,
“van-tab”: “@vant/weapp/tab/index”,
“van-tabs”: “@vant/weapp/tabs/index”,
“ms-main-navbar”: “/base-ui/ms-main-navbar/index”,
“van-sticky”: “@vant/weapp/sticky/index”,
“van-icon”: “@vant/weapp/icon/index”,
“form-item”: “/components/form-item/index”,
“van-popup”: “@vant/weapp/popup/index”,
“ms-button”: “/base-ui/ms-button/index”
}
}

js文件

 /*** 页面的初始数据*/data: {Authorization: "",taskDetailParams: {"currentPage": 1,"filters": {"status": ""},"orderBys": [],"pageSize": 10},// navigationBarAndStatusBarHeight: 0,dataitem: {name: "数据",faren: "王五"},active: 0,totalCount: 0,tabs: ['全部', '入库', '出库'],tabIndex: 0,//状态栏高度statusBarHeight: Cache.getCacheSync(STATUSBARHEIGHT),//导航栏高度navigationBarHeight: Cache.getCacheSync(MENUBUTTONHEIGHT),//胶囊按钮的高度menuButtonHeight: Cache.getCacheSync(NAVIGATIONBARHEIGHT),//状态栏加导航栏高度navigationBarAndStatusBarHeight: Cache.getCacheSync(NAVIGATIONBARANDSTATUSBARHEIGHT),SAFEBOTTOM: Cache.getCacheSync(SAFEBOTTOM),filter:false,changecolor:[{name:'借入',changecolor:false},{name:'借出归还',changecolor:false},{name:'来料加工',changecolor:false},{name:'借出归还',changecolor:false},{name:'借出',changecolor:false},{name:'退料',changecolor:false},]},onClose(){this.setData({filter:false})},changecolor(e){console.log(e,1)let sum=parseInt(e.currentTarget.dataset.item)console.log(typeof(sum))console.log(this.data.changecolor[sum].changecolor)this.data.changecolor.map((i,index)=>{console.log(i)this.setData({['changecolor['+index+'].changecolor']:false})})this.setData({['changecolor['+sum+'].changecolor']:true})console.log(this.data.changecolor)},queren(){this.setData({filter:false})},cancel(){this.setData({filter:false})},filter(){this.setData({filter:true})},
<van-popup show="{{ filter }}" position="right" custom-style="height: 100%; width:60%;padding-top:{{navigationBarAndStatusBarHeight+50}}px;" bind:close="onClose" catchtouchmove='ture'><view><view class="margin-left-10 margin-top-10 font-size-14" style="font-weight: 700;">业务类型</view><!-- <view wx:for="{{changecolor}}"><view class="flex jc-around margin-top-10"><view class="padding-10 font-size-14" style="background-color:{{changecolor[index].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[index].changecolor?'white':'black'}};" bindtap="changecolor" data-item="{{index}}">{{changecolor[index].name}}</view></view><view class="flex jc-around margin-top-10"><view class="padding-10 font-size-14" style="background-color: #F2F2F2;" bindtap="changecolor"style="background-color:{{changecolor[2].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[2].changecolor?'white':'black'}};" bindtap="changecolor" data-item="2">现款合同</view><view class="padding-10 font-size-14" style="background-color: #F2F2F2;" bindtap="changecolor"style="background-color:{{changecolor[3].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[3].changecolor?'white':'black'}};"bindtap="changecolor" data-item="3">来料合同</view></view></view> --><block wx:for="{{changecolor.length/2}}" wx:for-index="i" wx:for-key="{{i}}" wx:key="i"><view class="flex jc-around margin-top-10"><!--每行循序2次，index参数赋值在j变量上--><block wx:for="{{2}}" wx:for-index="j" wx:for-item="item_j" wx:for-key="key_j" wx:key="j"><!--此时数据的条数为i*2+j行数*2+第几行--><block wx:if="{{changecolor[i*2+j].name}}"><view class="demo-item"><view class="screen-data font-size-14" data-item="{{i*2+j}}" style="background-color:{{changecolor[i*2+j].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[i*2+j].changecolor?'white':'black'}};"bindtap="changecolor">{{changecolor[i*2+j].name}}</view></view></block></block></view></block></view><view class="margin-top-10"><view class="margin-left-10 font-size-14" style="font-weight: 700;">供应原材料</view><view class="flex jc-between grey padding-left-10 padding-top-5 padding-bottom-5 padding-right-5 margin-top-10" style="background-color: #F2F2F2;"><view>请选择</view><van-icon name="arrow" /></view></view><view class="margin-top-10"><view class="margin-left-10 font-size-14" style="font-weight: 700;">储料仓</view><view class="flex jc-between grey padding-left-10 padding-top-5 padding-bottom-5 padding-right-5 margin-top-10" style="background-color: #F2F2F2;"><view>请选择</view><van-icon name="arrow" /></view></view><view class="flex jc-between" style="position: fixed; width: 100%; bottom: 0; padding-bottom:{{SAFEBOTTOM}}px;"><ms-button buttonType="ms-grey" class="margin-left-5" bindtap="cancel">取消</ms-button><ms-button buttonType="ms-green" class="margin-right-5" bindtap="queren">确认</ms-button></view>
</van-popup>

其中控制循环的代码就是下面这一部分

<block wx:for="{{changecolor.length/2}}" wx:for-index="i" wx:for-key="{{i}}" wx:key="i"><view class="flex jc-around margin-top-10"><!--每行循序2次，index参数赋值在j变量上--><block wx:for="{{2}}" wx:for-index="j" wx:for-item="item_j" wx:for-key="key_j" wx:key="j"><!--此时数据的条数为i*2+j行数*2+第几行--><block wx:if="{{changecolor[i*2+j].name}}"><view class="demo-item"><view class="screen-data font-size-14" data-item="{{i*2+j}}" style="background-color:{{changecolor[i*2+j].changecolor?'#29AA4F':'#F2F2F2'}};color:{{changecolor[i*2+j].changecolor?'white':'black'}};"bindtap="changecolor">{{changecolor[i*2+j].name}}</view></view></block></block></view></block>

http://chatgpt.dhexx.cn/article/OT3PVrdk.shtml

相关文章

微信小程序将后台数据传给map中的多个markers 用for循环赋值

微信小程序将后台数据传给map中的多个markers 用for循环赋值

首先是后台创建map类 package bean;public class mapbean { private String iconPath; public String getIconPath() {return iconPath; }public void setIconPath(String iconPath) {this.iconPath iconPath; }public int getId() {return id; }public void setId(int id) {…
阅读更多...
java中Map循环的几种方式

java中Map循环的几种方式

package com.xhx.collection;import org.junit.Test;import java.util.HashMap; import java.util.Iterator; import java.util.Map;/*** xuhaixing* 2018/7/15 19:59**/ public class TestHashMapApp {/*** 循环的几种方式*/Testpublic void testHashMap1(){Map<String,Str…
阅读更多...
微信小程序for循环的数据每项添加编辑和删除操作

微信小程序for循环的数据每项添加编辑和删除操作

1.代码中写出样式&#xff0c;展开的内容用if绑定上checkedall 2.点击小图标时候&#xff0c;图标进行变化&#xff08;展开收起&#xff09; 3.获取数据的方法 map&#xff08;转换&#xff09; 让每一项都绑定cheeckdall&#xff0c;各不牵扯。 简单来说&#xff1a;每一项…
阅读更多...
微信小程序循环渲染canvas动态图表

微信小程序循环渲染canvas动态图表

需求&#xff1a;数据驱动图表渲染&#xff0c;先看效果图 我们知道&#xff0c;微信小程序中是没有图表组件的&#xff0c;使用echarts也会有很多问题&#xff0c;比如echarts的图表总是在屏幕最上层&#xff0c;也就是说&#xff0c;会在导航栏和菜单栏上方&#xff0c;这当…
阅读更多...
使用map优化for循环

使用map优化for循环

使用map优化for循环 微信公众号&#xff1a;前端程序猿之路关注可了解更多的前端知识&#xff0c;反馈问题或建议&#xff0c;请公众号留言。如果你觉得公众号内容对你有帮助&#xff0c;欢迎关注并转载 之前做的一个东西是点击一键升级按钮&#xff0c;修改后台返回的json数据…
阅读更多...
通过js获取本地IP地址

通过js获取本地IP地址

通过js获取本地IP地址 最近在做pc项目&#xff0c;需要根据用户的IP地址定位城市。IP地址需要通过js获取&#xff1a; 网上有很多查询接口可以获取到IP&#xff0c;我这里用的是搜狐的&#xff1a; http://pv.sohu.com/cityjson?ieutf-8 在浏览器中&#xff0c;直接输入这…
阅读更多...
利用JS获取用户当前ip地址

利用JS获取用户当前ip地址

新浪的IP地址查询接口&#xff1a;http://int.dpool.sina.com.cn/iplookup/iplookup.php?formatjs &#xff08;默认为纯文本格式&#xff0c;根据format的参数定义&#xff0c;还可以返回JS、Json格式&#xff09;。新浪多地域测试方法&#xff1a; http://int.dpool.sina.c…
阅读更多...
js获取用户浏览器信息和ip地址以及位置

js获取用户浏览器信息和ip地址以及位置

获取浏览器信息代码 function userAgent () {let browserReg {Chrome: /Chrome/,IE: /MSIE/,Firefox: /Firefox/,Opera: /Presto/,Safari: /Version\/([\d.]).*Safari/,360: /360SE/,QQBrowswe: /QQ/,Edge: /Edg/};let deviceReg {iPhone: /iPhone/,iPad: /iPad/,Android: /A…
阅读更多...
js方法获取本机IP

js方法获取本机IP

记录一次工作中需求 获取本机IP getUserIP(onNewIP) {// onNewIp - your listener function for new IPs//compatibility for firefox and chromevar myPeerConnection window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;var pc …
阅读更多...
【2023亲测可用】JS 获取电脑本地IP 和 电脑网络IP（外网IP|公网IP）

【2023亲测可用】JS 获取电脑本地IP 和 电脑网络IP（外网IP|公网IP）

1、了解&#xff1a;电脑本地的IP地址&#xff08;内网IP&#xff09;和电脑本机在网络上的IP地址&#xff08;外网IP|公网IP&#xff09; 在运行窗口输入“cmd”&#xff0c;在弹出的界面里输入“ipconfig/all”。弹出的数据中&#xff0c;IPv4地址&#xff0c;就是电脑本地的…
阅读更多...
C语言中的，“与”，“或”，“异或”解释

C语言中的，“与”，“或”，“异或”解释

int main() {int a2;//取二进制010int b4;//取二进制100//int ca && b;int ca&b;//”&“这个叫“与”&#xff0c;与门中的与&#xff0c;两个都为1的时候才为1&#xff0c; 0与任何数都为0&#xff0c;“|”这个叫“或”&#xff0c;两个都为0的时候才为0&…
阅读更多...
C语言位运算符及作用：与、或、异或、取反、左移和右移

C语言位运算符及作用：与、或、异或、取反、左移和右移

一、& 按位与 如果两个相应的二进制位都为1&#xff0c;则该位的结果值为1&#xff0c;否则为0 应用&#xff1a;&#xff08;1&#xff09;清零 若想对一个存储单元清零&#xff0c;即使其全部二进制位为0&#xff0c;只要找一个二进制数&#xff0c;其中各个位符合一下条…
阅读更多...
C/运算符（按位与、按位或、按位异或）

C/运算符（按位与、按位或、按位异或）

本文主要介绍C语言中按位与、按位或、按位异或三个操作符的使用。 该三个操作符中的位&#xff0c;代表的是二进制位。 按位与&#xff1a;& 运算规则&#xff1a;只有两个数的二进制同时为1&#xff0c;结果才为1&#xff0c;否则为0。&#xff08;负数按补码形式参加按…
阅读更多...
C | 妙用异或

C | 妙用异或

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 啊我摔倒了..有没有人扶我起来学习.... 目录 前言一、问题的引出二、异或实现俩变量值的交换三、总结 前言 异或也叫半加运算&#xff0c;其运算法则相当于不带进位的二进制加法&#xff1a;二进制下用1表示真&#xff0c;0…
阅读更多...
C语言中的异或 - 运算符^

C语言中的异或 - 运算符^

最近在完成程序设计入门-C语言中需要计算异或&#xff0c;查阅了很多资料终于明白计算计算原理&#xff0c;记录一下方便以后查询。 流程 举例 为了方便理解&#xff0c;下面结合流程举例说明 a1 6 &#xff0c; 转化成二进制 a2 0110 b1 10&#xff0c;转化成二进制 b2 …
阅读更多...
异或^操作符（C语言）

异或^操作符（C语言）

一、 简介 1. 异或^操作符&#xff1a;是一个位操作符&#xff0c;针对于二进制位&#xff08;比特位&#xff09;的操作。 2. 规则&#xff1a;两个数在同一个二进制位&#xff08;比特位&#xff09;&#xff0c;相同为0&#xff1b;不同为1。 3. 异或操作符的一些性质&…
阅读更多...
c语言异或(c语言异或符号)

c语言异或(c语言异或符号)

请帮我讲解一下C语言中的异或运算 首先&#xff0c;我们看一下异或的原理&#xff1a; a 3 ^ 5; 3的二进制是0011&#xff0c;5的二进制是0101。异或发现两者的不同之处&#xff0c;所以a最终为0110b(4)。 了解了异或的基本原理后&#xff0c;接下来看上述的代码。 a^b; 这一句…
阅读更多...
C语言异或操作详解（小小异或，大大作用~）

C语言异或操作详解（小小异或，大大作用~）

文章目录 *按位异或"^"(1)何为“^”&#xff1a;①“^”的介绍 (2)用于算法的经典案例&#xff1a; 1.数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗&#xff1f;&#xff08;源自leetcode面…
阅读更多...
【c语言操作符系列1】^(异或操作符)讲解和多种例题详解

【c语言操作符系列1】^(异或操作符)讲解和多种例题详解

目录 一、^ 是什么&#xff08;^称为异或&#xff09; 二、^的规律(特点) 三、可利用^秒杀的常见例题&#xff08;重点&#xff09; 1、消失的数字 2、不一样的人生密码 3、交换两个数&#xff08;不能创建中间变量&#xff09; 4、找出只出现一个的两个数字 一、^ 是什么…
阅读更多...
C语言中位运算异或“∧”的作用

C语言中位运算异或“∧”的作用

前言&#xff1a; 为了方便查看博客&#xff0c;特意申请了一个公众号&#xff0c;附上二维码&#xff0c;有兴趣的朋友可以关注&#xff0c;和我一起讨论学习&#xff0c;一起享受技术&#xff0c;一起成长。 1.概念 异或运算符"∧"也称XOR运算符。它的规则是若参…
阅读更多...
推荐文章

Copyright @ 2022~2023