原生小程序富文本图片适应手机屏幕,放大功能

.wxml

<view wx:if="{{word}}" wx:for="{{word}}" wx:key="index" class="word">
	<view class='word_title'>{{item.title}}</view>
	<image src='{{item.image}}' mode="heightFix" class="word_image" bindtap='bandBigImage' data-current="{{item.image}}"
		data-index="{{index}}"></image>

	<view class="contentbox px-3">
		<button bindtap="wordAnswer" data-index='{{index}}' style="background: #e6c779;width: 246rpx;" class="bth">
			<rich-text style="color:black;font-weight: 100;">点击查看答案 </rich-text>
		</button>
		<view class="contentbox px-3" wx:if="{{item.nav}}">
			<view style="height: 30rpx;"></view>
			
			//富文本
			<view  class='text' wx:if="{{item.answer}}" bindtap="toBig" data-answer="{{item.answer}}">
				<rich-text nodes="{{item.answer}}" space="emsp"></rich-text>
			</view>
			//富文本

			<view wx:else style="text-align: center;color: red;">该题目没有答案</view>
		</view>
	</view>
</view>

.js

	getHistoryData() {
		let {
			page,
			limit,
			nomore
		} = this.data;

		if (page == 1) {
			wx.showLoading({
				title: '加载中',
			})
		}

		if (nomore) {
			return;
		}
		reqHistoryData({
			topic_id: this.data.topic_id,
			token: app.token(),
			limit,
			page,
		}).then(res => {

			const list = res.data.data.word;
			const word = this.data.word;


			list.forEach(function(item, index) {
				item['nav'] = false;
				
				let wxwidth = wx.getSystemInfoSync().windowwidth;
				
				//富文本实现适应手机屏幕
				if(item['answer']){
					item['answer'] = item['answer'].replace(/\<img/gi,'<img style="width:100%;vertical-align:middle;"')
				}
			})
				//富文本实现适应手机屏幕

			this.setData({
				word: [...word, ...list],
				page: page + 1,
			})
			if (this.data.word.length == 0) {
				this.setData({
					showNullImage: true
				})
			}
			if (list.length < limit) {
				this.setData({
					nomore: true,
				})
			}

			wx.hideLoading()
		})
	},

	//实现放大图片
	toBig(e){
		//富文本图片放大
		var nodes = e.currentTarget.dataset.answer;
		if (nodes.indexOf("src") >= 0) {
		  //正则匹配所有图片路径
		  var imgs = [];
		  nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
		    imgs.push(capture);
			console.log(imgs);
		    return '';
		  });
		  //清除图片后正则匹配清除所有p标签
		  nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
		    return '';
		  });
		}
		
		var index = 0;
		let current = imgs[index];
		
		wx.previewImage({
			current, // 当前显示图片的http链接
			urls: imgs // 需要预览的图片http链接列表
		});
		
	}
	//实现放大图片

效果图:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值