小程序学习笔记-列表循环（3）

最新推荐文章于 2024-03-21 16:56:55 发布

键指江湖

最新推荐文章于 2024-03-21 16:56:55 发布

阅读量262

点赞数

分类专栏：小程序文章标签：小程序学习笔记-列表循环（3）

本文链接：https://blog.youkuaiyun.com/ahui829/article/details/102575937

版权

小程序专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一个小程序中使用wxml和js实现列表循环显示的方法，包括内外层双重循环的应用，展示了如何通过wx:for和wx:key属性正确遍历复杂的数据结构，如店铺信息和商品图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序学习之列表循环

wxml代码：
注意：wx:key=“index” 写上，不然会提示错误，虽然不影响代码运行，还是写上吧
在这里插入图片描述

<view class="item-list">
        <view class="item-list-box" wx:for="{{itemList}}" wx:key="index" wx:for-item="item">
            <view class="item-top">
                <view class="pic">
                    <image src="{{item.pic}}"></image>
                </view>
                <view class="info">
                    <view class="font28">{{item.name}}
                        <text class="tip">{{item.lable}}</text>
                    </view>
                    <text class="font26">{{item.store}}</text>
                </view>
            </view>
            <view class="item-pic">
                <view class="pic-list" wx:for="{{item.imgs}}" wx:key="index" wx:for-item="img">
                    <image src="{{img}}"></image>
                </view>
                
            </view>
        </view>
    </view>

这里店铺图片是for循环里面的for循环，要注意
在这里插入图片描述
js代码（page的data里面）

itemList:[
            {
                'pic':'../../images/index/pic.png',
                'name':'张先生',
                'store':'盛世江南店',
                'lable':'旗舰店',
                'imgs': [
                    '../../images/index/img.png', 
                    '../../images/index/img2.png',
                    '../../images/index/img.png'
                    ]
            },
            {
                'pic': '../../images/index/pic.png',
                'name': '李先生',
                'store': '海上五月花店',
                'lable': '旗舰店',
                'imgs': [
                    '../../images/index/img.png',
                    '../../images/index/img2.png',
                    '../../images/index/img.png'
                ]
            },
            {
                'pic': '../../images/index/pic.png',
                'name': '周先生',
                'store': '四季花城店',
                'lable': '旗舰店',
                'imgs': [
                    '../../images/index/img2.png',
                    '../../images/index/img.png',
                    '../../images/index/img2.png'
                ]
            },
        ]

效果如下：
在这里插入图片描述