当前位置: 首页 > news >正文

微信小程序<rich-text>支持里面图片点击放大

使用<rich-text>渲染类似下面的html代码:

<div style='color: red'>宠物友好<br/>xxx提供宠物友好服务,具体请见下图<br/></div>
<img src='https://xxx.com/xxx1.png' width='100%'/>
<img src='https://xxx.com/xxx2.png'' width='100%'/>

wxml:

<rich-text nodes="{{item.text}}" bind:tap="showImg" data-nodes="{{item.text}}"></rich-text>

js放大图片方法:

 //富文本图片点击预览showImg(e) {let contentimg = e.target.dataset.nodes;let imgs = contentimg.match(/<img[^>]+>/g); //把img所有节点的图片选择出来let arrImg = [];//遍历标签拼拿到你的图片的src里面的内容放在我们数组中for (var j = 0; j < imgs.length; j++) {imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {arrImg.push(capture)})}//最后一步就是把我们的所有图片放在预览的api中就可以了wx.previewImage({current: arrImg,urls: arrImg,})},

http://www.lryc.cn/news/575542.html

相关文章:

  • react-嵌套路由 二级路由
  • python 爬虫 下载视频
  • C++ 中 enum 语法
  • 【模拟】N 字形变换(medium)
  • 2025最新Tomcat 安装教程(保姆级,图文讲解,带安装包)
  • Django 零基础起步:开发你的网站第一步
  • 供应链管理:供应链计划主要计算公式/方法
  • 独立开发还能做吗
  • 用户统计-01.需求分析和设计
  • 机器学习基础:概念、算法与实践入门
  • 酒店智能门锁系统常见问题解决方法——东方仙盟
  • MyBatis-Plus - 条件构造器Wrapper
  • Socket 编程 TCP
  • Linux 和 Windows 服务器:哪一个更适合您的业务需求?
  • 通信网络编程4.0——JAVA
  • Java+LangChain实战入门:深度剖析开发大语言模型应用!
  • ArrayList和LinkedList详解
  • WPF 实现自定义弹窗输入功能
  • Spring Boot 项目中同时使用 Swagger 和 Javadoc 的完整指南
  • Redis核心知识详解:从全局命令到高级数据结构
  • 数据结构-第二节-堆栈与队列
  • python打卡day56@浙大疏锦行
  • 学习昇腾开发的第9天--在Ubuntu下安装ffmpeg4.2.11
  • php项目部署----------酒店项目
  • Docker数据管理——AI教你学Docker
  • Redis-set集合
  • C++ 第三阶段:语言改进 - 第四节:nullptr vs NULL
  • 基于Spring Boot 构建现代化短视频平台:HBC Video全栈开发实战
  • 《高等数学》(同济大学·第7版)第九章 多元函数微分法及其应用第二节偏导数
  • 信创国产化替代中的开发语言选择分析