使用wx:for()

于 2024-03-18 21:08:05 发布
阅读量314 收藏
点赞数 6
分类专栏： 笔记 文章标签： 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53325717/article/details/136821574
版权

使用wx:for()

 <swiper autoplay="ture" interval="2000" indicator-dots="1" circular="ture" >
    <swiper-item wx:for="{{bg}}" wx:key="index">
      <image src="{{bg[index]}}" mode="aspectFill"></image>
      </swiper-item>
  </swiper>

index.js

 data: {
    bg:[
      '../../images/swiper01.jpg',
      '../../images/swiper02.jpg',
      '../../images/swiper01.jpg'
    ],
    items: ['1', '2', '3',
            '4', '5', '6',
            '7', '8', '9'
          ]
      }
      //未使用items

index.wcss

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  margin-bottom: 10px; /* 根据需要调整上边距 */
}

实现的是小程序wx：for写法

随风万里无云
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序wx:for循环的实例详解
10-17
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。这篇文章主要介绍了微信小程序wx:for循环的相关知识,需要的朋友可以参考下
微信小程序wx:for和wx:for-item的用法详解
08-27
主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组，wx:for-item即给列表赋别名,文中给大家列出来几个错误用法，大家一起学习下
【微信小程序】基础篇 -- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）
JMFive的博客
02-28 7400
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第12篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。不知不觉已经学习微信小程序八天了，估计大佬们一天就学完这些内容了吧，我还在慢吞吞的学完，然后在看官方文档总结写写文章。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。
wx:for详解(附wx:key注意事项)
Lawless
07-19 2万+
之前有学过微信小程序的开发，今天看视频有进行了相关学习。之前也有学过Vue,与微信小程序语言有点相像，生命周期感觉都是大同小异。 之前的博客：Vue.js生命周期 Mr.J--Vue之v-for全解析 wx:for定义 官方文档：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量...
微信小程序中wx:for语法及其使用
You_wil_see的博客
10-07 2万+
微信小程序官方文档中wx:for 是用来做列表渲染，在组件上使用wx:for绑定一个数组，数组的下标变量名默认为index,数组当前项的变量名默认为item. 在Wxml中可以使用for循环获取数组数据（记住for循环后面跟的是数组，当然数组里可以有字典，字符串等等） 例： <view wx:for = “{{[’'张三”,“李四”]}}"> {{index}}:{{item}} < /view > 页面显示的是：0：张三 1：李四 如果想改变默认的下标和变量名，使用wx:for..
wx:for wx:for-item wx:for-index wx:for-key
weixin_40929263的博客
12-12 9816
wx:for wx:for-item wx:for-index wx:for-key
数组循环wx:for
qq_37194189的博客
02-02 774
wx:for
小程序视图层之WXML---列表渲染
教官的博客
11-12 321
wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名， wx:for-index 可以指定数组当前下标的变量名： //index.js array: [{ message: 'fo...
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
11-20
微信小程序的循环实现，通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢？ 1 wx:for 从目前的例子看，wx:for 的使用确实是对数组来做的，参考微信icon示例程序。 示例里面都是对数组进行条件...
微信小程序wx:for的使用，动态传参
03-29
一：wx:for的使用 在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js...
微信小程序 wx:for的使用实例详解
01-03
微信小程序 wx:for的使用实例详解 在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。 一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写...
微信小程序wx:for 的使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
04-11 1万+
在官方文档上看到wx:for是放在列表渲染里面讲的, 由此可以大概知道wx:for主要作用是列表,我们通常说list ,我想着就是相当于android这边的listview recyclerview 吧. 看下文档 有一句非常重要的话 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 如果不想使用默认的可以使用wx:for-item 可以指定数组当...
【微信小程序】列表渲染wx:for
m0_55394328的博客
11-22 4595
哈喽大家好，本期是微信小程序专栏第十二期，本期我们将学习列表渲染wx:for。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序开发系列（二十四）·wxml语法·列表渲染·wx:for-item 和 wx:for-index
最新发布
时光の尘的博客
03-08 1733
索引：{{ index }}, 水果名称：{{ fruitItem.name }}
【微信开发】微信小程序多层wx:for嵌套的使用
qq_52144300的博客
04-21 6823
微信小程序多层wx:for嵌套的使用
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明
m0_63622279的博客
07-12 4270
当condition条件为true时，代码块渲染显示，为false时，代码块不进行渲染.可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断 1.2. block标记 可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。 block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。从下面的例子来观察下，渲染出的页面结构有何特点： block标签未曾渲染，只是充当一个包裹性质的容器学过前端三剑客的应该看到这个属性就明白了，h
微信小程序：wx:for循环输出的使用方法以及简单例子
热门推荐
何小杰的博客
05-31 25万+
今天来讲解下循环输出元素 ： 然后我们自己尝试构建一个for循环输出的小程序 app.js以及app.json app.wxss页面的构造就不放出来了，不会的童鞋可以看博主的第一个小程序文章 初步构造完成如下： 下面是for.js的构造： // pages/for/for.js Page({ /** * 页面的初始数据 */ data: { ...
微信小程序开发系列（二十三）·wxml语法·列表渲染wx:for和wx:key的使用
时光の尘的博客
03-08 3025
列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上。在组件上使用 wx:for 属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件。每一项的变量名默认为 item,下标变量名默认为inde。在使用 wx:for 进行遍历的时候，建议加上 wx:key 属性，wx:key 的值以两种形式提供：字符串：代表需要遍历的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字,且不能动态改变。
uniapp 使用wx:for
08-30
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以同时开发小程序、App、H5 等多个平台的应用。在 UniApp 中，可以使用 `v-for` 指令来实现类似于小程序中的 `wx:for` 功能。 具体使用 `v-for` 来遍历数组或对象的语法如下： ```html <template> <view> <text v-for="(item, index) in list" :key="index">{{ item }}</text> </view> </template> <script> export default { data() { return { list: ['item1', 'item2', 'item3'] } } } </script> ``` 在上述代码中，我们使用 `v-for` 遍历了一个名为 `list` 的数组，并将每个元素渲染为 `<text>` 组件。`item` 表示当前遍历的元素，`index` 表示当前元素的索引，通过 `:key` 绑定了每个元素的唯一标识。 需要注意的是，在 UniApp 中，由于支持多平台开发，使用 `v-for` 遍历组件时，要确保被遍历的组件对于不同平台都有相应的支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值