微信小程序获取rich-text(富文本)渲染内容高度,rich-text(富文本)里img 样式设置

本文介绍了微信小程序中针对rich-text组件在处理富文本内容时,如何获取渲染后的内容高度以判断是否需要显示‘展开更多’按钮。同时讲解了如何修改富文本内的img样式,以及在高度计算时遇到的问题和解决方案,如使用延时器确保获取准确的高度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.背景:

在某些场景下,例如在某些详细信息内容展示数据量特别大的时候(有时候特别小),当数据量特别大的时候,需要做展示固定高度,展开更多内容完全展示,收起内容又还原。当内容特别少的时候,例如小于3行,不展示更多按钮。(小程序内容获取的时候是不能知道当前内容有几行的,可能有人会说,我知道字体大小一行内放几个字,几行就再乘以几,让后台算好,传两个字段,展开收起,分别用两个字段即可,理论上是可行的(但太麻烦,如果有图片有文字呢,这种思路就歇菜了))。其实前端在渲染的时候也不知道有几行,但可以获取内容高度,通过内容高度进行比较即可。

2.代码

2.1wxml

<view class="richText {
  {more_flag?'':'h1980hidden'}} {
  {more_flag?'pb100':(sjFlag==1?'pb68':'')}}">
	<view class="richText-rich" id="richText-rich">
		<rich-text nodes="{
  {rich}}"></rich-text>
	</view>
	<view class="richText-sj" wx:if='{
  {sjFlag}}'>
		<!-- on -->
		<view class="richText-msg {
  {more_flag?'on':''}}" catchtap="click_more"></view>
	</view>
</view>

2.2wxss

.richText {
  position: relative;
  margin-top: 30rpx;
}

.pb68 {
  padding-bottom: 68rpx;
}

.richText-sj {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAABuCAYAAADBJhBzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRjIzMzAzODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRjIzMzA0ODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGMjMzMDE4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGMjMzMDI4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4hEh1+AAAQEklEQVR42uzd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);
  background-size: 100% 110rpx;
  background-position: center;
  background-repeat: no-repeat;
  height: 110rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.richText-msg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAfCAMAAADEKUFYAAAAGXRFWHRTb2Z0d2FyZQBBZG9i
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值