微信小程序:for循环与if判断

article/2025/10/2 20:30:05

for和if一般都写在block里面。

wx:for="{{abc}}":这是for循环,其中的abc就是你js文件的data里面定义的,一般都是数组。

index默认是循环的下标。

item默认是当前的值。

index和item可以自己定义名字:

        wx:for-index="a"        这里面的a就可以替换原来的index

        wx:for-item="b"         这里面的b就可以替换原来的item

wx:if="{{index%2==0}}":这是if判断,其中index我取的就是当前的下标。

下面实现了一个相邻两行数组变色,并且点击某一行,就会选中成白色的功能。

效果图

 

two.js

// pages/table/table.js
Page({/*** 页面的初始数据*/data: {cindex:-1,//班级学生的信息  视图中使用表格的形式做展现stus:[{"id":"1001","name":"赵一","addr":"苏州"},{"id":"1002","name":"赵二","addr":"上海"},{"id":"1003","name":"赵三","addr":"杭州"},{"id":"1004","name":"赵四","addr":"北京"},{"id":"1005","name":"赵五","addr":"广州"},{"id":"1006","name":"赵六","addr":"广西"},{"id":"1007","name":"赵七","addr":"广东"},{"id":"1008","name":"赵八","addr":"湖州"},{"id":"1009","name":"赵九","addr":"嘉兴"},{"id":"1010","name":"赵十","addr":"西藏"}]},clickitem(event){console.log(event);let  clickIndex=event.currentTarget.dataset.index;this.setData({cindex:clickIndex});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

two.json

{"usingComponents": {}
}

two.wxml

<!--pages/table/table.wxml-->
<view  class="pageview"><view  class="tr"><view  class="th"><text>编号</text></view><view  class="th"><text>姓名</text></view><view  class="th"><text>地址</text></view></view><block  wx:for="{{stus}}" wx:for-item="stu"><block  wx:if="{{index%2==0}}"><view  class="{{index==cindex?'str':'tr1'}}"  bindtap="clickitem" data-index="{{index}}"><view  class="td"><text>{{stu.id}}</text></view><view  class="td"><text>{{stu.name}}</text></view><view  class="td"><text>{{stu.addr}}</text></view></view></block><block  wx:if="{{index%2!=0}}"><view  class="{{index==cindex?'str':'tr2'}}" bindtap="clickitem" data-index="{{index}}"><view  class="td"><text>{{stu.id}}</text></view><view  class="td"><text>{{stu.name}}</text></view><view  class="td"><text>{{stu.addr}}</text></view></view></block></block>
</view>

two.wxss

/* pages/table/table.wxss */
.pageview{width: 100%;height: 100vh;}.tr{width: 100%;height: 50px;background-color: pink;display: flex;position: fixed;left: 0px;top:0px;z-index: 999;}.th{width: 32%;display: flex;align-items: center;justify-content: center;color: black;letter-spacing: 5px;font-weight: bold;}.td{width: 32%;display: flex;align-items: center;justify-content: center;color:black;}.tr1{position: relative;left: 0px;top:50px;width: 100%;height: 50px;background-color: orange;display: flex;}.tr2{position: relative;left: 0px;top:50px;width: 100%;height: 50px;background-color: salmon;display: flex;}.str{position: relative;left: 0px;top:50px;width: 100%;height: 50px;background-color: snow;display: flex;}


http://chatgpt.dhexx.cn/article/6OawmLWw.shtml

相关文章

微信小程序:wx:for循环输出的使用方法以及简单例子

今天来讲解下循环输出元素 后台存储的数据给事 {var local_database [{date: "Sep 18 2016",post_title:"冬日校花",post_image: "/images/1.jpg",text: "美呀&#xff0c;美呀",view_num: 112,collect_num: 96,turn_num: 515,autho…

微信小程序_for循环

循环展示列表 wxml <text>角色列表1</text> <view><!-- 默认item是循环列表的每一个元素&#xff0c;index是索引 可以用过 --><view wx:for"{{dataList}}">{{index}}-{{item}}</view> </view> <text>角色列表2&…

微信小程序for循环遍历数组解决办法

最近在做微信小程序项目遇到一个问题&#xff0c;如下&#xff1a; 在wxml文件做wx:for循环遍历数组时&#xff0c;数组含八个元素&#xff0c;循环次数却只有五次&#xff0c;从下面代码看 <scroll-view scroll-ytrue style"height: 262rpx;"><view class…

微信小程序 if语法、for循环 条件渲染、列表渲染等讲解

这篇文章我想给大家学习的就是如何使用 if 去判断 组件的是显示和隐藏&#xff0c;如何使用for循环来渲染列表等重复的内容。 1.if语法的使用 在小程序中&#xff0c;我们可以使用wx:if"{{条件}}"来判断是否需要渲染该代码块 也可以用 wx:elif 和wx:else 来添加 el…

微信小程序-for循环

微信小程序-for循环 通过wx:for可以根据指定的数组&#xff0c;循环渲染重复的组件结构&#xff0c;语法示例如下&#xff1a; <view wx:for"{{arr}}">索引是&#xff1a;{{index}} -> 当前项是&#xff1a;{{item}}</view>默认情况下&#xff0c;当…

微信小程序之for循环

在微信小程序中也有for循环,用于进行列表渲染。 官方实例 打开微信开发者文档,在框架部分的视图层--》wxml--》列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关说明。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;使用 …

学习如何使用微信小程序的for和foreach循环遍历获得索引和数据

学习如何使用微信小程序的for和foreach循环遍历获得索引和数据 js文件中定义数组第一种for循环方法第二种for循环方法length第三种forEach循环方法 js文件中定义数组 * 页面的初始数据*/data: {users: [{name: 张三,age: 18}, {name: 李四,age: 19}, {name: 王五,age: 20}, {n…

大数据基础(一):大数据概念

文章目录 大数据概念 数据 常见数据存储单位 大数据 大数据概念 最早提出“大数据”时代到来的是全球知名咨询公

大数据基础知识(上)

大数据基础知识&#xff1a;技巧与概念 什么是大数据数量多流转快种类多大数据需要具备全部三个特征吗&#xff1f; 如何使用大数据了解消费者大数据了解企业大数据了解科学研究大数据 大数据与数据科学大数据与小数据的差异数据科学的三大领域数据科学的类型和技能去掉大数据&…

大数据——Hadoop 知识点整理

目录 1. 大数据的特点&#xff08;4V特征&#xff09; 2. 谈谈 Hadoop 的优缺点 3. 为什么 HDFS 不适合存小文件 4. Hadoop 的核心组件有哪些&#xff0c;并说明下功能 5. Hadoop 与关系型数据库对比 6. 如果集群中 DataNode 出现错误&#xff08;比如 DataNode 进程死亡…

入门大数据,需要学习哪些基础知识

大数据的发展历程总体上可以划分为三个重要阶段&#xff0c;萌芽期、成熟期和大规模应用期&#xff0c;20世纪90年至21世纪初&#xff0c;为萌芽期&#xff0c;随着&#xff0c;一批商业智能工具和知识管理技术的开始和应用&#xff0c;度过了数据萌芽。 推荐一个大数据学习群…

大数据入门知识总结

大数据入门知识总结 一、大数据部门及流程二、数据仓库1、数据仓库的基本概念2、数据仓库的主要特征3、数据仓库与数据库区别5、数据仓库——ETL 三、Hadoop——HDFS分布式存储系统1、Hadoop简介2、HDFS、Yarn、MapReduce3、Hadoop集群搭建4、HDFS的概述5、HDFS的Shell命令6、H…

大数据基础知识介绍

大数据介绍 大数据介绍什么是大数据大数据特点大数据能做什么 大数据项目流程介绍大数据基础知识什么是服务器&#xff1f;服务器类型按应用层次划分按用途划分按机箱结构划分 存储磁盘&#xff08;硬盘&#xff09;机械硬盘固态硬盘&#xff08;SSD&#xff09;混合硬盘机械硬…

大数据概论知识整理

目录 学习要求 一、数据科学的学科地位 二、统计学 1.统计学与数据科学 2.数据科学中常用的统计学知识 3.统计学与机器学习的区别与联系 4.数据科学视角下的统计学 三、机器学习 1.机器学习与数据科学 2.数据科学中常用的机器学习的知识 &#xff08;1&#xff09;基…

大数据基础--大数据深入了解

目录 第一部分 《大数据概述》 传统数据如何处理&#xff1f; 什么是大数据&#xff1f; 传统数据与大数据的对比 大数据的特点&#xff1f; 大数据前/后服务器系统安装部署区别是什么&#xff1f;。 大数据生态系统以及技术组件介绍 大数据技术为什么快&#xff1f; 什么是分…

大数据是什么?学大数据要掌握的基础是?(简单的介绍)

一、学习大数据需要的基础 javaSE&#xff0c;EE(SSM) 90%的大数据框架都是java写的 如&#xff1a;MongoDB--最受欢迎的&#xff0c;跨平台的&#xff0c;面向文档的数据库。 Hadoop--用Java编写的开源软件框架&#xff0c;用于分布式存储&#xff0c;并对非常大的数据集进行分…

大数据基础知识(下)

大数据基础知识&#xff1a;技巧与概念 大数据伦理匿名方面的挑战保密性方面的挑战 大数据的来源和结构人类生成的数据机器生成的数据结构化数据非结构化数据 存储大数据分布式存储与云云计算&#xff1a;IaaS、PaaS、SaaS 和 DaaS Hadoop 简介准备大数据进行分析数据质量方面的…

大数据基础知识1

内容概要 1)什么是服务器&#xff1f; 2)服务器类型 3)什么是RAID&#xff1f; 4)RAIO特点 5)什么是集群&#xff1f; 6)什么是网络&#xff1f; 7)什么是交换机、局域网&#xff1f; 8)什么是网络拓扑、机架&#xff1f; 9)IDC数据中心 (1)什么是服务器&#xff1f; 服务器…

大数据_03【大数据基础知识】

大数据_03 【大数据基础知识】 01 大数据概述02 什么是大数据&#xff1f;&#xff08;Big Data&#xff09;03 传统数据与大数据的对比04 大数据的特点4.1 传统数据与大数据处理服务器系统安装对比4.2 大数据下服务器系统安装 05 大数据生态系统06 大数据生态系统 01 大数据概…

大数据分析入门基础知识学什么?

大数据分析入门基础知识学什么&#xff1f;做好数据分析要掌握多方面的知识和技能&#xff0c;软实力包括沟通能力、表达能力、设计能力等。学大数据分析需要掌握可视化分析、数据挖掘算法、预测性分析能力、语义引擎、数据质量和数据管理等方面的知识。 大数据分析入门基础知识…