商品详情（一）

2024-07-07 14:59| 来源: 网络整理| 查看: 265

商品详情获取商品ID 通过小程序生命周期函数获取路径参数 onLoad (param) { // 获取路径中的参数 this.goodsId = param.goods_id } 实例

列表页-跳转:url="'/pages/goods_detail/main?gid=' + item.goods_id"

{{item.goods_name}} ￥{{item.goods_price}}

第一步：在src/pages下，新建goods_detail商品详情页文件夹

在里面新建main.js文件

import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()

第二步：新建index.vue页面模板

详情 export default{ data(){ return{} } }

第三步：在src/app.json中，添加页面路径

"pages": [ "pages/home/main", "pages/cate/main", "pages/cart/main", "pages/my/main", "pages/search/main", "pages/search_list/main", "pages/goods_detail/main" ],

第四步：新建文件后，npm run dev重启项目

点击列表title，实现跳转

在这里插入图片描述

获取商品id

{{gid}} export default{ data(){ return{ gid:'', } }, onLoad (param) { this.gid = param.gid this.loadData() } }

图例：

在这里插入图片描述

加载商品详情数据调用接口获取商品详情数据路径：goods/detail async loadData () { // 根据商品的id查询详细信息 let res = await request('goods/detail', { goods_id: this.goodsId }) this.info = res } 实例： import request from '../../utils/request.js' export default { data () { return { gid: '', //商品详情数据 info: {} } }, methods: { async loadData () { // 获取商品详情数据 let res = await request('goods/detail', { goods_id: this.gid }) //console.log(res) this.info = res } }, onLoad (param) { this.gid = param.gid //调用商品详情数据 this.loadData() } }

打印商品详情数据res

在这里插入图片描述

【本文地址】

公司简介

联系我们