微信小程序列表显示完整代码
时间: 2024-06-20 10:04:31 浏览: 51
微信小程序商店完整代码
3星 · 编辑精心推荐
微信小程序列表显示主要包含两个方面的代码,一个是前端页面的代码,另一个是后端数据请求的代码。
前端页面代码如下:
```html
<view class="container">
<view class="item" wx:for="{{list}}" wx:key="{{index}}">
<image src="{{item.picUrl}}" mode="aspectFill" class="pic"></image>
<view class="info">
<view class="title">{{item.title}}</view>
<view class="desc">{{item.desc}}</view>
</view>
</view>
</view>
```
其中,`wx:for`和`wx:key`是用来循环遍历列表数据的,`{{list}}`是前端页面与后端数据交互的接口名称。
后端数据请求代码如下:
```javascript
wx.request({
url: 'https://www.example.com/api/list',
success: res => {
this.setData({
list: res.data
})
}
})
```
其中,`url`是后端数据请求接口地址,`success`是请求成功后的回调函数,在回调函数中将请求到的数据更新到前端页面中。
阅读全文