文章目录
- 1、index.wxml
- 2、index.js
- 检查点
- 1. 确保目标页面存在
- 2. 确保页面路径配置正确
- 3. 检查页面接收参数
- productDetail.js
- productDetail.wxml
- productDetail.wxss
- 总结
1、index.wxml
<!-- 商品搜索结果卡片容器 -->
<view class="search-result">
<block wx:for="{{products}}" wx:key="id">
<!-- 商品信息展示区域 -->
<view class="product-card card-layout-{{cardLayout}}" bindtap="navigateToDetail" data-id="{{item.id}}">
<!-- 商品图片 -->
<image class="product-image" src="{{item.image}}" />
<!-- 商品描述和价格 -->
<view class="product-info">
<text class="product-title">{{item.name}}</text>
<!-- 商品元信息和价格在同一行显示 -->
<view class="meta-price-container">
<view class="product-meta">
<text class="product-origin">{{item.location}}</text>
<text class="product-barcode">条码：{{item.jancode}}</text>
</view>
<view class="product-price">
<text class="price">{{item.standardPrice}}<text style="font-size:14rpx;">元</text></text>
</view>
</view>
</view>
</view>
</block>
</view>
2、index.js
// 点击商品卡片后跳转到详情页
navigateToDetail(event) {
const productId = event.currentTarget.dataset.id;
console.log("跳转到详情页，产品ID:", productId);
wx.navigateTo({
url: `/pages/productDetail/productDetail?id=${productId}`,
});
},
跳转到详情页，产品ID: 679
看到控制台输出了正确的产品ID，说明事件绑定和事件处理函数都没有问题。接下来，我们需要确保页面跳转也正常工作。
检查点
- 确保目标页面存在：确保
productDetail页面已经创建并且路径正确。 - 确保页面路径配置正确：确保在
app.json中正确配置了页面路径。 - 检查页面接收参数：确保
productDetail页面能够正确接收并处理传递过来的参数。
1. 确保目标页面存在
确保productDetail页面已经创建，并且路径正确。通常情况下，页面文件会放在pages目录下。
project-root/
├── pages/
│ ├── index/
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ └── productDetail/
│ ├── productDetail.wxml
│ ├── productDetail.wxss
│ ├── productDetail.js
│ └── productDetail.json
2. 确保页面路径配置正确
在app.json中配置页面路径，确保productDetail页面被正确注册。
{
"pages": [
"pages/index/index",
"pages/productDetail/productDetail"
]
}
3. 检查页面接收参数
确保productDetail页面能够正确接收并处理传递过来的参数。
productDetail.js
productDetail.wxml
productDetail.wxss
总结
- 确保目标页面存在：检查
productDetail页面文件是否创建并放置在正确的位置。 - 确保页面路径配置正确：在
app.json中注册productDetail页面。 - 检查页面接收参数：确保
productDetail页面能够正确接收并处理传递过来的参数。
