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

news/2024/4/25 21:00:04/文章来源:https://blog.csdn.net/qq_59110215/article/details/128082100

提纲挈领:

那么如何在小程序中将这些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.luyixian.cn/news_show_38481.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络第五章知识点回顾(自顶向下)

1. 网络层控制面 1.1 网络层功能 1.2选路问题 选路问题的描述&#xff1a; 给定一组路由器和连接路由器的链路&#xff0c;寻找一条从源路由器到目的路由器的最佳路径。 1.3 什么是最佳路径&#xff1f; 1.4 图抽象 1.5 选路算法分类 1.6 链路状态&#xff08;LS&#xff0…

[附源码]计算机毕业设计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…

手把手教你构建一个前端路由

涉及知识点&#xff1a;location对象、history对象 文章目录基础概念什么是路由如何实现前端路由涉及问题前端路由实现方式1. hash方式2. history方式3. debug&#xff1a;本地起服务报错扩展&#xff1a;封装路由类Routerhashhistory基础概念 什么是路由 路由是一组映射关系…

51单片机学习笔记4 新建工程及点亮LED实战

51单片机学习笔记4 新建工程及点亮LED实战一、使用keil新建工程二、项目设置1. 点击魔术棒&#xff0c;钩选Output-Create Hex File2. 设置仿真器三、编写代码1. 尝试编译代码2. 点亮LED的代码3. GPIO引脚介绍4. GPIO内部结构P0端口&#xff1a;P1 端口四、软件仿真一、使用kei…

[附源码]SSM计算机毕业设计校园爱心支愿管理系统JAVA

项目运行 环境配置&#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…

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

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

字符串压缩(一)之ZSTD

一、zstd压缩与解压 ZSTD_compress属于ZSTD的Simple API范畴&#xff0c;只有压缩级别可以设置。 ZSTD_compress函数原型如下&#xff1a; size_t ZSTD_compress(void* dst, size_t dstCapacity, const void* src, size_t srcSize, int compressionLevel) ZSTD_decompress函数原…

全网首发克莱斯勒东南大捷龙jeep道奇DIY数码碟盒增加USB和蓝牙播放音乐功能使用原车接口无损改装

文章目录前言碟盒功能1、设计指标3、外观设计4、PCB设计5、程序设计6、调试7、大捷龙车机尾插接口定义公头东南大捷龙车机白色插头模块与白色插头连接方法8、安装方法9、 使用方法9.1 CD车机按钮功能定义11、 联系我前言 ​ 之前写过四篇关于车机增加音频输入的方法。 1、07宝…

水电站下泄生态流量监控解决方案-智能监测生态流量遥测终端-水电站流量监测站

平升电子水电站下泄生态流量监控解决方案-智能监测生态流量遥测终端-水电站流量监测站是一款集人机交互、视频叠加、4G路由、数据采集、逻辑运算与远程传输功能于一体的多媒体智能终端设备。 此款产品为水电站生态流量监测项目的专用产品&#xff0c;便于监管单位及时掌握水电…

农村城镇面板数据集:地级市人均消费与支出2012-2019各省农村数据2013-2019

1、2002-2019年地级市人均消费与支出数据 1、数据来源&#xff1a;wind 2、时间跨度&#xff1a;2012-2019 3、区域范围&#xff1a;287个地级市 4、指标说明&#xff1a; 包含以下四个指标&#xff1a;人均可支配收入&#xff08;农村&#xff09;、人均可支配收入&#…

Python中的dump() 、load()和dumps()、loads()使用及示例

Python中的dump() 、load()和dumps()、loads() 结论&#xff1a; 1.不加s的标识对json文件的读写&#xff0c;将内存中值读取写入到json后缀文件&#xff0c;或者将json后缀文件中内容读取到内存 2.加了s的主要是字符串类型和其他数据类型的互转 JSON(JavaScript Object No…

如何用R语言在机器学习中建立集成模型?

介绍 在本文中&#xff0c;我将向您介绍集成建模的基础知识。 另外&#xff0c;为了向您提供有关集成建模的实践经验&#xff0c;我们将使用R进行集成。最近我们被客户要求撰写关于集成模型的研究报告&#xff0c;包括一些图形和统计输出。 1.什么是集成&#xff1f; 通常&am…

初始数据结构

目录 1. 集合的框架 集合框架的重要性 数据结构的介绍 算法的介绍 容器背后对应的数据结构 2. 时间复杂度和空间复杂度 算法效率 时间复杂度 时间复杂度的概念 大O的渐进表示法 常见的时间复杂度的计算 空间复杂度 空间复杂度的概念 从本章开始又要开始新的篇章&a…

【Python实战】“特种兵”们的专属游戏助手,助你吃鸡:极品小助手也是棒呆了~(“大吉大利,今W吃鸡”)

前言 有温度 有深度 有广度 就等你来关注哦~ 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝白嫖源码福利&#xff0c;请移步至CSDN社区或文末公众hao即可免费。 “注意左边&#xff0c;左边有人&#xff0c;打他&#xff01;” “快上车&#xff01;&#xff0…

idea搭建ssm项目全过程详解:

1&#xff0c;创建maven项目&#xff1a; 然后&#xff0c;点击next 其次 2&#xff0c;在pom.xml导入相关依赖&#xff1a;&#xff08;如果idea没有集成maven需要先集成maven&#xff09; <dependencies><dependency><groupId>org.springframework</gr…

[附源码]计算机毕业设计JAVA同城搬家平台

[附源码]计算机毕业设计JAVA同城搬家平台 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis M…

流利地回答出面试官提出的八股问题,面试官却突然说“背得不错”,该怎么回答?...

面试前背题是大家心照不宣的做法&#xff0c;一般面试官也不会揭穿&#xff0c;但如果遇到一位犀利的面试官&#xff0c;那该怎么办呢&#xff1f;一位网友就遇到了这样的窘境&#xff1a;面试的时候&#xff0c;十分流利地回答出面试官提出的概念原理方面的问题&#xff0c;面…

[附源码]Python计算机毕业设计SSM基于Java的音乐网站(程序+LW)

环境配置&#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模式 Maven管理等…

拼多多季报图解:营收355亿同比增65% 研发投入达27亿

雷递网 雷建平 11月28日拼多多今日发布2022年第三季度业绩报告。财报显示&#xff0c;拼多多2022年第三季度营收为355亿元&#xff0c;同比增长65.1%。受到一些项目投入延缓等偶发因素影响&#xff0c;三季度平台运营费用为176.5亿元&#xff0c;占收入的比例从上年同期的59.6&…

IBM MQ MQCSP

一&#xff0c;概念 1.1 用途 用途&#xff1a;MQCSP 结构使授权服务能够验证用户 ID 和密码。您在 MQCONNX 调用上指定 MQCSP 连接安全参数结构。 警告&#xff1a;在某些情况下&#xff0c;客户端应用程序的 MQCSP 结构中的密码将以纯文本形式通过网络发送。要确保客户端应…