如何通过uni-app实现商品列表点击跳转至详情页功能？
摘要：一、概述 上一篇文章，已经实现了资讯详情页面数据渲染 接下来实现，商品列表点击跳转至商品详情页。 点击首页推荐商品，以及网上超市的商品，都可以显示id 效果如下： 二、商品列表组件传递id 修改componentsgoods-listg
一、概述
上一篇文章，已经实现了资讯详情页面数据渲染
接下来实现，商品列表点击跳转至商品详情页。
点击首页推荐商品，以及网上超市的商品，都可以显示id
效果如下：
二、商品列表组件传递id
修改components/goods-list/goods-list.uvue文件，
子组件触发（emit） 一个自定义事件 (goodsItemClick)，传递id
完整代码如下：
<template>
<view>
<view class="goods_list">
<view class="goods_item" v-for="item in goods" :key="item.id" @click="navigator(item.id)">
<image :src=" item.img_url" mode="">
</image>
<view class="price">
<text>¥{{item.sell_price}}</text>
<text>¥{{item.market_price}}</text>
</view>
<view class="name">
{{item.title}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['goods'],
data() {
return {
}
},
methods: {
//点击商品 传入id 调用index和goods中跳转的事件方法。