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,说明事件绑定事件处理函数都没有问题。接下来,我们需要确保页面跳转也正常工作。

检查点

  1. 确保目标页面存在:确保productDetail页面已经创建并且路径正确。
  2. 确保页面路径配置正确:确保在app.json中正确配置了页面路径。
  3. 检查页面接收参数:确保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

总结

  1. 确保目标页面存在:检查productDetail页面文件是否创建并放置在正确的位置。
  2. 确保页面路径配置正确:在app.json中注册productDetail页面。
  3. 检查页面接收参数:确保productDetail页面能够正确接收并处理传递过来的参数。

在这里插入图片描述

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部