微信小程序 - 循环语句wx:for的使用

刺骨的言语ヽ痛彻心扉 2021-08-13 17:57 1325阅读 0赞

**小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一项，wx:key表示的是数组的唯一值（在使用wx:for的时候要加上这个，否则编译器会提示警告）。**  
下面举个例子：  
在index.wxml文件中

<view class='sort-ct-item' wx:for='{
       {lists}}' wx:for-index="indexs" wx:for-item="items" wx:key="indexs">
       <view class='item-img'>
         <image src='{
       {items.src}}'></image>
       </view>
       <view class='sort-ct-title'>
          <view>{
       {items.name}}</view>
       <view class='price'>{
       {items.price}}</view>
    </view>

要循环的数组结构：

lists: [
            {
                tid: 1,
                src: '../../images/1.jpg',
                name: '毛巾,
                price: '¥6.90'
              },
              {
                tid: 2,
                src: '../../images/2.jpg',
                name: '拖鞋',
                price: '¥5.90'
              },
              {
                tid: 3,
                src: '../../images/3.jpg',
                name: '瓶子',
                price: '¥4.90'
              }
    ]

发表评论取消回复

表情：

评论列表（有 0 条评论，1325人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序weui的使用

小程序weui官网：[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/][https_develo

墨蓝/ 2022年12月11日 05:22/ 0 赞/ 2277 阅读

相关微信小程序使用colorui

一，下载colorui源码 [官方网站：https://www.color-ui.com/][https_www.color-ui.com] [GitHub：http

蔚落/ 2022年11月20日 04:59/ 0 赞/ 757 阅读

相关微信小程序使用input

html部分 <view class="item" wx:for="{ {setList}}" wx:key="index"> <text class="l

柔光的暖阳◎/ 2022年11月05日 08:48/ 0 赞/ 205 阅读

相关关于微信小程序循环以及嵌套循环的总结

关于微信小程序，最近被安排做微信小程序，首次接触，总体来说上手不是太困难。对于小程序的循环问题颇有感触，因为自己绑定数据到界面无数次用到循环和嵌套循环。对于我们在js中

港控/mmm°/ 2022年06月08日 08:49/ 0 赞/ 501 阅读

相关微信小程序循环数据

新建一个页面 ![20180610174428774][] 在JS中写数据 ![20180610174435760][] 然后在wxml文件用wx:for来循环， i

深藏阁楼爱情的钟/ 2022年05月21日 22:08/ 0 赞/ 226 阅读

相关微信小程序：微信小程序插件使用

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

╰+哭是因爲堅強的太久メ/ 2022年04月10日 06:47/ 0 赞/ 563 阅读

相关微信小程序使用 Websocket

基本思路是： 1. 全局维护一个SocketTask对象，用来表示websocket连接，判断是否断线，作为重连的依据。 2. 同时定义一个全局callback回调函数，

谁践踏了优雅/ 2022年04月03日 12:15/ 0 赞/ 306 阅读

相关微信小程序：注册微信小程序

注册小程序帐号在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。 ![20170521234518211][] 选择注册

短命女/ 2021年12月09日 03:53/ 0 赞/ 692 阅读

相关微信小程序使用总结

我在微信小程序中遇到的问题组件中遇到的问题 1、swiper组件（1）swiper滑动错误如果在 bindchange 的事件回调函数中使用 set

一时失言乱红尘/ 2021年12月01日 12:22/ 0 赞/ 380 阅读

相关微信小程序 - 循环语句wx:for的使用

小程序的循环结构：wx:for，其中，wx:for对应的是要循环的那个数组，wx:for-index对应的是循环数组的索引值，wx:for-item对应的是循环数组中的每一

刺骨的言语ヽ痛彻心扉/ 2021年08月13日 17:57/ 0 赞/ 1326 阅读