Day14--商品详情-渲染商品详情的数据并优化详情页的显示

news2025/1/16 19:04:46

提纲挈领:

那么如何在小程序中将这些html的字符串渲染成这莫好看的结构呢?

官方文档:【使用uni-ui组件库中的rich-text组件】

 1.渲染商品详情信息

我的操作:

1》在页面结构中,使用 rich-text 组件,将带有 HTML 标签的内容,渲染为小程序的页面结构:

效果图:

 2》修改 getGoodsDetail 方法,从而解决图片底部 空白间隙 的问题:【利用正则来替换

正则表达式我的解释是:

/<img /g   表示所有以<img开头的标签全部替换为 <img style="dispaly:block"

 3》解决 .webp 格式图片在 ios 设备上无法正常显示的问题:

**************************************************************************************************************

2. 解决商品价格闪烁的问题

存在问题:

 我的操作:

因为你没拿到数据之前,它是goods_info它是空的。所以会展示空的东西。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/44787.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

盘点一个批量提取pdf文件目标信息的实用案例

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤你若盛开,清风自来。大家好&#xff0c;我是皮皮。一、前言前几天在帮助粉丝解决问题的时候&#xff0c;遇到一个简单的小需求&#xff0c;需要批量提取pdf文…

【零基础入门SpringMVC】第六期——尾声

一、注解配置SpringMVC 采用全注解开发&#xff0c;替代我们的web.xml和SpringMVC的核心配置文件 我们需要创建对应的配置类&#xff0c;继承AbstractAnnotationConfigDispatcherServletInitializer 使用的Servlet版本要求在3.0以上项目启动后容器会找到配置了&#xff0c;基于…

台积电跪舔美国,日本却醒悟了而选择独立发展芯片产业

近期台积电大举包机10架将精英人才和设备转往美国引发争议&#xff0c;然而这个时候日本却选择了独立发展芯片产业的道路&#xff0c;摆脱美国的限制&#xff0c;显然日本清醒地认识到依赖美国不会有好结果。台积电之前还在左右摇摆&#xff0c;希望既能继续获得美国芯片的订单…

测试用例的重要性,看完这篇就够了

测试用例对于测试工作的作用&#xff1a;1、指导测试的实施测试用例主要适用于集成测试、系统测试和回归测试。在实施测试时测试用例作为测试的标准&#xff0c;测试人员一定要按照测试用例严格按用例项目和测试步骤逐一实施测试。并对测试情况记录在测试用例管理软件中&#x…

干货 | 数字经济创新创业——如何发展绿色经济

下文整理自清华大学大数据能力提升项目能力提升模块课程“Innovation & Entrepreneurship for Digital Economy”&#xff08;数字经济创新创业课程)的精彩内容。主讲嘉宾&#xff1a;Kris Singh: CEO at SRII, Palo Alto, CaliforniaVisiting Professor of Tsinghua Unive…

[附源码]计算机毕业设计springboot房屋租赁系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

【毕业设计】27-基于单片机的家庭监控及防盗报警_热释电报警_人体系统工程设计(原理图+源代码+仿真+实物照片+答辩论文)

【毕业设计】27-基于单片机的家庭监控及防盗报警/热释电报警/人体系统工程设计&#xff08;原理图源代码仿真实物照片论文&#xff09; 文章目录【毕业设计】27-基于单片机的家庭监控及防盗报警/热释电报警/人体系统工程设计&#xff08;原理图源代码仿真实物照片论文&#xff…

【Java实战】工作中规范使用Java集合

目录 一、前言 二、规范使用Java集合 1.【强制】关于 hashCode 和 equals 的处理&#xff0c;遵循如下规则&#xff1a; 2.【强制】判断所有集合内部的元素是否为空&#xff0c;使用 isEmpty() 方法&#xff0c;而不是 size() 0 的方式。 3.【强制】在使用 java.util.str…

接口自动化测试实践指导(中):接口测试场景有哪些

在第一篇文章中详细给小伙伴们讲解了接口自动化需要做哪些准备工作&#xff0c;准备工作中最后一步接口测试用例设计是非常重要的一个环节&#xff0c;用例设计的好不好&#xff0c;直接关系到我们的测试质量。那如何进行测试用例设计呢&#xff1f;这里呢我结合自身经验&#…

PYTHON 用几何布朗运动模型和蒙特卡罗MONTE CARLO随机过程模拟股票价格可视化分析耐克NKE股价时间序列数据...

原文链接&#xff1a;http://tecdat.cn/?p27099 金融资产/证券已使用多种技术进行建模。该项目的主要目标是使用几何布朗运动模型和蒙特卡罗模拟来模拟股票价格。该模型基于受乘性噪声影响的随机&#xff08;与确定性相反&#xff09;变量&#xff08;点击文末“阅读原文”获取…

【 医学影像| 数据预处理】

影像读取及预处理&#xff1a;预处理后的数据集建议保存在本地&#xff0c;可以减少训练时的部分资源消耗。里面提到了归一化的 对分割的一些理解&#xff1a;基于深度学习来做医学图像处理&#xff0c;主要的工作集中在了数据预处理部分&#xff1a;深入理解医学图像的格式和特…

GLAD:体全息

概述 自从伽伯1948年提出全息术后&#xff0c;光学全息术已经被广泛用于三维光学成像领域。体全息成像技术是采用体全息光栅作为成像元件对物体进行三维成像的技术。 1990年,由Barbastathis和Brady提出体全息成像技术&#xff0c;采用体全息光栅作为选择成像元件&#xf…

【微信小程序高频面试题——精选一】

微信小程序高频面试题小程序中如何进行接口请求&#xff1f;会不会跨域&#xff0c;为什么小程序的常用命令有哪些你认为微信小程序的优点是什么&#xff0c;缺点是什么微信小程序中的js和浏览器中的js以及node中的js的区别微信小程序中的数据渲染浏览器中有什么不同小程序中如…

全国所有地级市环境污染、企业、公路、固定资产、外商投资-最新面板数据

一、1990&#xff0d;2019年地级市面板数据 1、数据来源&#xff1a;中国城市统计年鉴、WIND数据库 2、时间跨度&#xff1a;2000-2019 3、区域范围&#xff1a;所有地级市 4、指标说明&#xff1a; 该份部分数据指标如下&#xff1a; 主营业务税金及附加(万元) 发明专利…

android-CHECK_xxx分析

android-CHECK_xxx 在android源码中有不少类似这样的用法&#xff0c;上图中就是检查获得的hal版本是否大于等于版本1_3&#xff0c;满足继续往下走&#xff0c;不满足则assert&#xff0c;并报错。 接下来就展开看看CHECK_xx家族&#xff1a; 用法 类型用法含义CHECK_EQ(val…

【SpringCloud】07 流量管理sentinel

sentinel Sentinel 是面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性。 1. 微服务中的服务雪崩 服务雪崩效应是一种因“服务提供者的不可…

Springboot系列(二十二):如何纯文本转成.csv格式文件?|超级详细,建议收藏

一、前言&#x1f525; 不知道大家有咩有遇到这么个需求&#xff0c;给你一长串文本&#xff0c;要求你能导成excel格式展示数据&#xff0c;一时间我陷入了沉思&#xff0c;如果要常规转excel&#xff0c;最明显的一点就是固定表头名&#xff0c;然而并不是&#xff0c;这表头…

[附源码]计算机毕业设计springboot冬奥资讯系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

【DL with Pytorch】第 2 章 : 神经网络的构建块

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

第一个Shader Graph

上篇我们用ShaderLab来实现了第一个Shader,但对于初学者也太复杂了,那有没有简单的方式来实现shader的操作呢? 现在我们来分享下ShaderGraph,可视化编程,如图所示 ShaderGraph介绍 ShaderGraph是2018年推出的,可以看下官网出的例子https://github.com/UnityTechnologi…