当前位置: 首页 > 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.lqws.cn/news/535969.html

相关文章:

  • 物联网与低代码:Node-RED如何赋能工业智能化与纵横智控的创新实践
  • 【51单片机5毫秒定时器】2022-6-1
  • 机器学习---正则化、过拟合抑制与特征筛选
  • 抖音图文带货权限怎么开通
  • Vue3 中 Axios 深度整合指南:从基础到高级实践引言总结
  • 《解锁FFmpeg - python:开启多媒体处理新时代》
  • 多线程编程 ----线程主动退出pthread_exit与线程被动退出pthread_cancel
  • DAY 33 简单的神经网络
  • 前端面试专栏-主流框架:14. Vue Router与Vuex核心应用
  • Spring Boot使用Redis常用场景
  • Python爬虫多线程并发时的503错误处理最佳实践
  • HTTP-Cookie和Session
  • 算法第48天|单调栈:42. 接雨水、84.柱状图中最大的矩形
  • 鸿蒙边缘智能计算架构实战:从环境部署到分布式推理全流程
  • window显示驱动开发—DirectX 图形内核子系统(一)
  • 树莓派超全系列教程文档--(67)rpicam-apps可用选项介绍之检测选项
  • 算法-最大子数组
  • 【Python】For
  • Agentic AI爆发前夜,合作伙伴如何把握时代机遇?
  • 2D写实交互数字人如何重塑服务体验?
  • MP1652GTF-Z:MPS高效3A降压转换器 工业5G通信专用
  • windows内核句柄判断有效
  • LeetCode刷题-top100(和为 K 的子数组)
  • ISP Pipeline(4): Anti Aliasing Noise Filter 抗锯齿与降噪滤波器
  • 【thinkphp5】Session和Cache记录微信accesstoken
  • QT实现一个三轴位移台的控制界面
  • QT Creator构建失败:-1: error: Unknown module(s) in QT: serialport
  • 【CMake基础入门教程】第七课:查找并使用第三方库(以 find_package() 为核心)
  • 【缓存技术】深入分析如果使用好缓存及注意事项
  • Flux.create