微信小程序-列表渲染、获取列表传递值

最新推荐文章于 2024-09-08 10:47:00 发布

是会飞的猪

最新推荐文章于 2024-09-08 10:47:00 发布

阅读量5.6k

点赞数 1

分类专栏：小程序文章标签： wxml语法

本文链接：https://blog.csdn.net/weixin_42597880/article/details/97689472

版权

本文旨在通过实例讲解微信小程序中如何进行列表渲染，包括wx:for指令的使用，列表项的事件绑定，以及如何在for循环中传递参数和实现tap事件。重点讨论了wx:key的作用以及在block中使用wx:for的场景。

摘要由CSDN通过智能技术生成

1.目的

通过几个简单的例子，介绍如何实现列表渲染，及在列表中传递参数和跳转界面。

2.列表渲染

.wxml
<view>
    <block wx:for="{
  {items}}" wx:for-item="item" wx:key="000" wx:for-index="index">
        <view>{
  {index}}:{
  {item.name}}</view>
    </block>
</view>

.js
Page({
    data:{
        items:[
            { name:"商品A"},
            { name:"商品B"},
            { name:"商品C"},
            { name:"商品D"},
            { name:"商品A"}
        ]
    }
})

注意：items和item的区别。
各个属性的含义和对应关系：

变量名	含义
items	对应data中整个数组
item	变量的值，就是name:“商品A”、name:“商品B”，在js文件中不用有对应的变量，只是在wxml中取的一