小程序P137 13.商品详情-渲染商品详情的数据并优化详情页的显示1、染商品详情信息①在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：<!-- 商品详情信息 --><rich-text :nodes="goods_info.goods_introduce"></rich-text>②修改 getGoodsDetail 方法，从而解决图片底部 空白间隙 的问题：// 定义请求商品详情数据的方法async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg') this.goods_info = res.message}2、解决商品价格闪烁的问题①导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {}，因此初次渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。②解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面的显示与隐藏：<template> <view v-if="goods_info.goods_name"> <!-- 省略其它代码 --> </view></template>