QGW1799.1-2013国家电网电力安全规程变电部分安规模拟系统,真心推荐


有需求后端返回的一个静态页面是一个富文本,使用原生组件rich-text之后,即可渲染到页面,当渲染到页面之后,含有img图片如何实现点击预览?
思路:使用正则把图片的url进行剖离出来,push进一个数组中,点击富文本组件,运行wx.previewImage方法。
wxml:
<rich-text nodes="{{富文本}}" catchtap="richTextClick"></rich-text>
点击事件:
// 富文本点击事件
richTextClick() {
// 富文本
const richContent = this.data.content;
// 判断含有图片
if (richContent.indexOf("src") >= 0) {
const imgs = [];
richContent.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgs.push(capture);
})
wx.previewImage({
current: imgs[0], // 当前显示图片的http链接
urls: imgs
})
}
},
不足&Tip:
1、点击事件是加在富文本组件rich-text上的,渲染到页面也是一样,并不会把富文本中的dom渲染在页面中;
2、在预览图片时,无法知道用户点击的当前是哪个图片。所以,含有多张图片时,预览始终会从第一张图片开始,可左右滑动。
相关文档:
rich-text
wx.previewImage
let date = new Date(); //Fri Oct 29 2021 16:37:56 GMT+0800 (CST)
let timestamp = new Date().getTime(); //1635496676223 (毫秒级)
let y= date.getFullYear(); //获取完整的年份(4位)
let m= date.getMonth(); //获取当前月份(0-11,0代表1月)
let d= date.getDate(); //获取当前日(1-31)
let w= date.getDay(); //获取当前星期X(0-6,0代表星期天)
let h= date.getHours(); //获取当前小时数(0-23)
let i= date.getMinutes(); //获取当前分钟数(0-59)
let s= date.getSeconds(); //获取当前秒数(0-59)
拓展:
let outcome = Math.round(new Date().getTime()/1000).toString();
一明开发者中心自成立以来,专心致力于微信小程序源码研究交流学习,根据发展空间与理念,聚合优质源码打造内部开发者群体服务。
包括:前端,后端各类微信小程序源码资源服务交流学习,工具类占据主要成分,其次在博客论坛上进一步进行研究。
