微信小程序完成数组列表的显示:["a","a","b","b","c"]和[{mes:'one',id:1},{mes:'two',id:2},{mes:'three',id:3},]完整代码
时间: 2024-12-18 14:28:59 浏览: 6
在微信小程序中,你可以使用`wxml`文件来展示数组数据,然后通过`js`文件处理数据并渲染到页面上。这里是一个简单的例子,假设你想将字符串数组和对象数组合并,并以列表的形式展示出来:
**wxml (页面文件):**
```html
<view class="list">
<view wx:for="{{combinedList}}">
{{item.mes}}
</view>
</view>
```
**js (逻辑文件):**
```javascript
Page({
data: {
strArray: ["a", "a", "b", "b", "c"],
objArray: [{ mes: 'one', id: 1 }, { mes: 'two', id: 2 }, { mes: 'three', id: 3 }],
combinedList: [], // 合并后的数组
},
onLoad: function() {
this.combinedList = this.strArray.concat(this.objArray.map(item => ({ mes: item.mes })));
},
})
```
在这个示例中,我们首先在`onLoad`生命周期函数中将两个数组合并。`concat()`用于连接两个数组,而`map()`用于将对象数组转换成结构相同的简单对象数组,以便于合并。
现在,结合后的数组`combinedList`会包含字符串和对象的数据,会在页面上按照`mes`属性值显示。
阅读全文