欢迎光临,了解各类小程序、网站开发,就上众彬建站! 退出 注册 登录

微信小程序列表加载

发布:2022-03-15 17:06浏览: 来源: 作者:

小程序中如何添加列表?

数据加载

js数据:

添加一个array名称的列表

1 Page({
2   data: {
3     array: ['C#', 'Java', 'Python', 'Nodejs', 'Electron']
4   }
5 })

wxml前端:

绑定array列表,使用微信封装的for循环遍历数据。

{{item}}为列表项数据,item在微信框架语法中指定列表项,不能是aaa之类随便的名称。

1 
2    {{item}} 
3 

如果item改为index,输出的则是列表项的序号

使用index+item,可以输出带序号的列表:

1 
2    {{index+item}} 
3 

使用index+数字时, {{index*10}} ,能自动解析数据类型,对数字进行运算

使用数字或者字符串,则输出的是输入值,比如 {{‘item’}}

列表数据模板加载

定义数据:

1 Page({
2   data:{
3     list: [
4       { firstName: 'Hulk', lastName: 'Hu' },
5       { firstName: 'Shang', lastName: 'You' },
6       { firstName: 'Gideon', lastName: 'Lin' }
7     ]
8   }
9 })

使用模板填充:

 1 
 2   
 7 
 8   
 9   
10   
11 

使用for遍历数据:

...表示 扩展运算符,来将一个对象展开。{{...item}},即为 {{ firstName: 'Hulk', lastName: 'Hu' }}

 1 
 2   
 7   
 8     
 9   
10 









免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。