写一个微信小程序订单的列表页面,点击可以转到相对应的订单页面
时间: 2024-02-22 21:58:40 浏览: 22
好的,以下是一个简单的微信小程序订单列表页面的代码示例:
```html
<!-- orderList.wxml -->
<view class="order-list">
<block wx:for="{{orders}}" wx:key="orderId">
<view class="order-item" bindtap="goToOrderDetail" data-orderId="{{item.orderId}}">
<view class="order-info">
<text class="order-title">{{item.title}}</text>
<text class="order-price">¥{{item.price}}</text>
</view>
<view class="order-status">{{item.status}}</view>
</view>
</block>
</view>
```
```js
// orderList.js
Page({
data: {
orders: [
{ orderId: 1, title: '订单1', price: 100, status: '已完成' },
{ orderId: 2, title: '订单2', price: 200, status: '待发货' },
{ orderId: 3, title: '订单3', price: 300, status: '待付款' },
]
},
goToOrderDetail: function(event) {
let orderId = event.currentTarget.dataset.orderId;
wx.navigateTo({
url: `/pages/orderDetail/orderDetail?orderId=${orderId}`
});
}
});
```
在这个示例中,我们首先使用了一个 `wx:for` 循环渲染订单列表,每个订单都是一个 `order-item`,其中包含订单的标题、价格和状态等信息。当用户点击某个订单时,我们通过 `bindtap` 事件和 `data-*` 属性来获取该订单的 `orderId`,并使用 `wx.navigateTo` 方法跳转到订单详情页面,并将 `orderId` 作为参数传递过去。
需要注意的是,我们需要在小程序的配置文件 `app.json` 中声明订单详情页面的路径,例如:
```json
{
"pages": [
"pages/orderList/orderList",
"pages/orderDetail/orderDetail"
]
}
```
在订单详情页面中,我们可以通过 `onLoad` 生命周期函数获取传递过来的 `orderId` 参数,并根据该参数获取对应的订单详情信息。具体的代码实现可以根据具体需求进行编写。