您现在的位置是:网站首页>前端技术>uniappuniapp

uniapp v-html 富文本实现图片放大预览功能

神夜2020-03-12 20:44:39uniapp5610人已围观文章来源:神夜个人博客

简介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条
  • 微信公众号:扫描二维码,关注我们