ReadMore 展开阅读更多 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

# ReadMore 展开阅读更多

✈

组件名：uv-read-more

该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。

# 平台兼容性

App（vue）	App（nvue）	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

# 基本使用

直接通过slot传入正文内容。
使用showHeight可以配置一个高度，单位可以是px或rpx，默认400px。内容高度超出该值，才会出现“展开阅读全文”按钮。
设置属性toggle为true或false，默认true，可以配置展开后是否显示收起的按钮。

<template>
	<uv-read-more show-height="200rpx" :toggle="true">
		<view class="content">
			<view>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</view>
			<view>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</view>
			<view>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</view>
			<view>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</view>
			<view>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</view>
		</view>
	</uv-read-more>
</template>
<style scoped>
	.content {
		padding: 0 30rpx;
	}
</style>

# 配合解析器使用

兼容性问题处理： 由于一些微信小程序平台的渲染能力的问题，在解析uv-parse组件内容时会比较耗时，导致read-more组件内部无法准确得知内容的高度，而出现计算错误，这种情况下，我们需要借助uv-parse组件的@load(内容多为文字时)或者@ready(内容多为图片时，可能会有较大延时)事件，通过ref重新初始化read-more组件的高度，如下：
如果因为内容图片较多，可以再在@ready回调中适当的给个延迟，这样就可以保证展开完整显示。

<template>
	<uv-read-more ref="readMore">
		<uv-parse class="content" :content="content" @ready="ready"></uv-parse>
	</uv-read-more>
</template>
<script>
	export default {
		data() {
			return {
				content: `<p class="content">
					<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
					<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
					<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
					<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
					<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
					<p><img src="https://via.placeholder.com/200x200.png/2878ff" /></p>
					<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
				</p>`
			}
		},
		methods: {
			ready() {
				// 由于图片较多，可以再适当的给一个延迟
				setTimeout(()=>{
					this.$refs.readMore.init();
				},1000)
			}
		}
	}
</script>
<style scoped>
	.content {
		line-height: 48rpx;
		padding: 0 30rpx;
	}
</style>

# 异步初始化

有时候需要展示的内容是从后端获取的，组件内部的onLoad生命周期初始化时，请求尚未回来，会导致内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过ref调用组件的init方法，重新初始化。

<template>
	<uv-read-more show-height="200px" :toggle="false" ref="readMore">
		<rich-text class="content" :nodes="content"></rich-text>
	</uv-read-more>
</template>
<script>
	export default {
		data() {
			return {
				content: '',
				getContent: `<p class="content">
					<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
					<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</p>
					<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
					<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</p>
					<p>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
					<p>译文：丙辰年的中秋节，高兴地喝酒直到第二天早晨，喝到大醉，写了这首词，同时思念弟弟苏辙。明月从什么时候才开始出现的？我端起酒杯遥问苍天。不知道在天上的宫殿，何年何月。我想要乘御清风回到天上，又恐怕在美玉砌成的楼宇，受不住高耸九天的寒冷。翩翩起舞玩赏着月下清影，哪像是在人间。月儿转过朱红色的楼阁，低低地挂在雕花的窗户上，照着没有睡意的自己。明月不该对人们有什么怨恨吧，为什么偏在人们离别时才圆呢？人有悲欢离合的变迁，月有阴晴圆缺的转换，这种事自古来难以周全。只希望这世上所有人的亲人能平安健康，即便相隔千里，也能共享这美好的月光。</p>
				</p>`
			}
		},
		async onLoad() {
			// 模拟后端请求
			this.content = await this.getData();;
			this.$nextTick(() => {
				this.$refs.readMore.init();
			})
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(this.getContent);
						uni.hideLoading();
					}, 1000)
				})
			}
		}
	}
</script>
<style scoped>
	.content {
		line-height: 48rpx;
		padding: 0 30rpx;
	}
</style>

# 自定义样式

此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整shadowStyle对象，此对象内部如下：
如果您不想要阴影，将backgroundImage设置为none即可，关于paddingTop和marginTop自行调整至合适数值即可。

<template>
	<uv-read-more show-height="200rpx" :shadowStyle="shadowStyle">
		<view class="content">
			<view>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</view>
			<view>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</view>
			<view>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</view>
			<view>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</view>
			<view>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</view>
		</view>
	</uv-read-more>
</template>
<script>
	export default {
		computed: {
			shadowStyle() {
				return {
					// #ifndef APP-NVUE
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					// #endif
					// #ifdef APP-NVUE
					// nvue上不支持设置复杂的backgroundImage属性
					backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					// #endif
					paddingTop: "100px",
					marginTop: "-100px",
				}
			}
		}
	}
</script>
<style scoped>
	.content {
		padding: 0 30rpx;
	}
</style>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# ReadMore Props

参数	说明	类型	默认值	可选值
showHeight	内容超出此高度才会显示展开全文按钮，单位rpx	String \| Number	400	-
toggle	展开后是否显示收起按钮	Boolean	false	true \|false
closeText	关闭时的提示文字	String	展开阅读全文	-
openText	展开时的提示文字	String	收起	-
color	提示文字的颜色	String	#2979ff	-
fontSize	提示文字的大小，默认单位px	String \| Number	14	-
shadowStyle	对阴影的自定义处理，对象形式	Object	见上方说明	-
textIndent	段落首行缩进的字符个数	String	2em	-
name	用于在`open`和`close`事件中当作回调参数返回	String \| Number	-	-

# ReadMore Methods

名称	说明
init	重新初始化组件内部高度计算过程，如果内嵌uv-parse组件时可能需要用到

# ReadMore Events

事件名	说明	回调参数
@open	内容被展开时触发	name - props中传入的`name`参数值
@close	内容被收起时触发	name - props中传入的`name`参数值

← CodeInput 验证码输入 Line 线条 →