青橙商城——商品详情

莫凡是莫烦
64 阅读2分钟

 获取商品详情数据

  1. 在 data 中定义商品详情的数据节点：

image.png

  1. 在 onLoad 中获取商品的 Id，并调用请求商品详情的方法：

image.png

  1. 在 methods 中声明 getGoodsDetail 方法：

image.png

 商品轮播图部分

1 构建轮播图

  1. 使用 v-for 指令，循环渲染如下的轮播图 UI 结构：（注意一定是在swiper内写不要加view）

image.png

2 实现轮播图预览效果

  1. 为轮播图中的 image 图片绑定 click 事件处理函数：

  2. 在 methods 中定义 preview 事件处理函数：

image.png

 渲染商品信息区域

  1. 在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：nodes节点将对应的结构渲染

    <!-- 商品详情信息 -->
<rich-text :nodes="goods_info.goods_introduce"></rich-text>

  2. 修改 getGoodsDetail 方法，从而解决图片底部 空白间隙 的问题：采用正则解决（要在获取这里的数据进行设置，原因就是图片是会有空格间隙）

image.png 3. 解决 .webp 格式图片在 ios 设备上无法正常显示的问题：（原因是非jpg或png无法在ios上加载）

继续在上面的正则上追加，直接替换成'jpg'

image.png

解决商品价格闪烁的问题

  1. 导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {}，因此初次渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。

  2. 解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面的显示与隐藏：

   <template>
     <view v-if="goods_info.goods_name">
      <!-- 省略其它代码 -->
     </view>
   </template>

渲染详情页底部的商品导航区域

1 渲染商品导航区域的 UI 结构

基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果

  1. 在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象：

  2. 在页面中使用 uni-goods-nav 商品导航组件：

image.png

  1. 美化商品导航组件，使之固定在页面最底部：

    .goods-detail-container {
  // 给页面外层的容器，添加 50px 的内padding，
  // 防止页面内容被底部的商品导航组件遮盖
  padding-bottom: 50px;
}

.goods_nav {
  // 为商品导航组件添加固定定位
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

2 点击跳转到购物车页面

  1. 点击商品导航组件左侧的按钮，会触发 uni-goods-nav 的 @click 事件处理函数，事件对象 e 中会包含当前点击的按钮相关的信息： 根据 e.content.text 的值，来决定进一步的操作：

    // 左侧按钮的点击事件处理函数
onClick(e) {
  if (e.content.text === '购物车') {
    // 切换到购物车页面
    uni.switchTab({
      url: '/pages/cart/cart'
    })
  }
}
    1. 开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16天，点击查看活动详情
avatar
文章
阅读
粉丝