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

刺骨的言语ヽ痛彻心扉 2021-08-13 17:57 1346阅读 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 条评论，1346人围观）

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

相关阅读

相关微信小程序TabBar的使用

微信小程序TabBar的使用一、TabBar使用步骤 1.创建所需要的界面和所需要的图片： ![img][] 1. 配置文件：我们找到项目根目录中的配置

妖狐艹你老母/ 2023年02月25日 11:24/ 0 赞/ 16 阅读

相关微信小程序事件的使用

事件的使用方式 1）在组件中绑定一个事件处理函数。如`bindtap`，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。 <view

谁践踏了优雅/ 2023年02月21日 06:42/ 0 赞/ 36 阅读

相关微信小程序weui的使用

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

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

相关微信小程序使用colorui

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

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

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

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

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

相关微信小程序循环数据

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

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

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

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

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

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

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

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

相关微信小程序之使用wx:for遍历循环

效果图如下: ![1255290-20190719201252093-224167622.png][] 实现代码如下: type.js: // pages/t

今天药忘吃喽~/ 2021年11月13日 19:36/ 0 赞/ 312 阅读

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

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

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