您现在的位置是:网站首页>前端技术>uniappuniapp
uniapp v-html 富文本实现图片放大预览功能
神夜2020-03-12 20:44:39【uniapp】5610人已围观文章来源:神夜个人博客
简介uniapp v-html H5端渲染富文本实现图片放大预览功能,多图片预览
uniapp v-html H5端渲染富文本实现图片放大预览功能,多图片预览
<view v-html="info" @click="imageChange()"></view> <script type="text/javascript"> //H5点击预览 imageChange(e) { e = e || window.event; let target = e.target ||e.srcElement; let newimglist = this.info.match(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi); let srclist = []; for (var j = 0; j < newimglist.length; j++) { newimglist[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match, capture) { srclist.push(capture); } ); } newimglist = srclist; var current = 0; newimglist.forEach((res,index)=>{ if(res==target.src){ current = index; } }) uni.previewImage({ current: current, //当前显示图片的http链接 urls: newimglist //需要预览图片http链接列表 }); }, </script>
上一篇:没有了
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们