微信小程序之列表渲染wx:for

软件小生活

发布于 2021-10-08 16:42:10

1.5K0

发布于 2021-10-08 16:42:10

文章被收录于专栏：软件小生活软件小生活

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

列表渲染

列表渲染官方文档链接 - 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

wx:for 相当于php中的foreach

数据一般都是从 .js文件获得的, 注意输出带上两个大括号
调取的内容可以是字符串, 对象和数组

FILE index.js
  data: {
    sex: ['男', '女'],
    userinfo: { "age": "23" ,"height":"171cm"},
    username: "liudehua"
  },

FILE index.wxml
<view>
  {{sex[0]}}
</view>

<view>
  {{userinfo.height}}
</view>

<view>
  {{username}}
</view>

wx;for相当于php中的foreach函数, index相当于php的key, item相当于php中的value

php中可以命名key和value, 小程序中也可以自定义名字

**循环数组格式-数组中包含对象:**
 articles: [{ 'Mavis': 'YiHan', 'List': 'shenghuo' }, { 'Mavis': 'ManYan', 'List': 'manyan' }]
例子为许美静的遗憾和蔓延专辑
**取循环数组的值**

<view wx:for="{{articles}}" >
  {{index}}---{{item.Mavis}}---{{item.List}}
</view>

FILE index.js
  data: {
    sex: ['男', '女'],
    userinfo: { "age": "44" ,"height":"170cm"},
    username: "XuMeiJing",
    articles: [{ 'Mavis': 'YiHan', 'List': 'shenghuo' }, { 'Mavis': 'ManYan', 'List': 'manyan' }]
  },
FILE index.wxml

<!--数组, 对象, 字符串, 循环数组 
-->
<view>
  {{sex[1]}}
</view>

<view>
  {{userinfo.height}}
</view>

<view>
  {{username}}
</view>

循环数组(数组包含对象)
<view wx:for="{{articles}}" >
  {{index}}---{{item.Mavis}}---{{item.List}}
</view>

上例进阶-自定义--命名index和item
<view wx:for="{{articles}}" wx:for-index="key" wx:for-item="value" style='color:red'>
  {{key}}---{{value.Mavis}}---{{value.List}}
</view>

演示纯数组
<view wx:for="{{sex}}" wx:for-index="key" wx:for-item="value" style='color:blue'>
   <view> {{key}}---{{value}} </view>
</view>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-19，如有侵权请联系 cloudcommunity@tencent.com 删除

php