微信小程序实例介绍列表渲染-小程序开发

首页 2024-06-26 15:34:23

本文为您带来了微信小程序的相关知识，主要介绍了列表渲染的相关内容。让我们看看，我希望它能对你有所帮助。

【相关学习推荐:小程序学习教程】

wx:for

通过wx:根据指定的数组，for可以循环渲染重复的组件结构，语法示例如下：

<view>?
????索引是：{{index}}?当前项是：{{item}}
</view>

登录后复制

默认情况下，当前循环项的索引用index表示；当前循环项用item表示 hacker.wxml 定义for循环访问数组

<view>?
????索引是：{{index}}?当前项是：{{item}}
</view>

登录后复制

hacker.js 定义一个数组

Page({????data:{????????arr1:['a','b','c']
????}
})

登录后复制

运行结果如下：

手动指定索引和当前项目的变量名

使用wx:for-index可以指定当前循环项索引的变量名使用wx:for-item可以指定当前项目的变量名示例代码如下：

<view>
????索引是：{{idx}}??当前项是：{{itemName}}
</view>

登录后复制

hacker.wxml

<view>
????索引是：{{idx}}??当前项是：{{itemName}}
</view>

登录后复制

hacker.js

Page({????data:{????????arr1:['a','b','c']
????}
})

登录后复制

运行结果如下：

wx:使用key

类似于Vue列表渲染：key，在实现列表渲染时，小程序还建议为渲染列表项指定唯一的key值，以提高渲染效率。示例代码如下： hacker.wxml

<view>{{item.name}}</view>

登录后复制

hacker.js

Page({????data:{????????userList:[
????????????{id:?1,name:?'hacker'},
????????????{id:?2,name:?'meng'},
????????????{id:?3,name:?'yuan'}
????????]
????}
})

登录后复制

操作结果如下：[相关学习推荐：小程序学习教程]

以上就是微信小程序实例介绍列表渲染的详细内容，更多请关注其它相关文章！

阅读全文

上一篇：数据格式不容小觑，复制粘贴需谨慎！
下一篇：回收服务器，价格公道，高效服务！

微信小程序实例介绍列表渲染-小程序开发

首页 2024-06-26 15:34:23

最新文章

相关文章