基于《黑马商城》项目，分析资讯详情列表的实现uniapp中rich-text的使用

在这篇文章中，我们基于《黑马商城》项目，分析资讯列表详情的实现，

主要功能是从资讯列表点击某一项，跳转到对应资讯详情页面，

资讯详情页面如下：

 需要从资讯列表点击跳转过来，资讯列表如下：

 （由于连接图床有问题，所以不能显示出图片）

我们从资讯列表点击，传递id，到详情页面

详情页面根据传过来的id，发起请求从后端获取不同的内容

---

下面我们来具体分析详情页面的实现：

页面显示如下：

 HTML代码如下：

<template>
	<view class="news_detail">
		<text class="title">{{detail.title}}</text>
		<view class="info">
			<text>发表时间：{{detail.add_time | formatDate}}</text>
			<text>浏览：{{detail.click}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>

页面内容分为三个部分

第一个部分是标题，第二个部分是信息区（包括发表时间和浏览次数），第三个部分是内容区域（由rich-text实现）

我们在载入页面生命周期函数onLoad()中，获取上一个页面传入的参数id，并且发起请求，代码如下：

		onLoad(options){
			this.id = options.id
			this.getNewsDetail()
		}

 getNewsDetail()方法如下：

		methods: {
			async getNewsDetail () {
				const res = await this.$myRuquest({
					url: '/api/getnew/'+this.id
				})
				console.log(res)
				this.detail = res.data.message[0]
			}
		},

针对这个获取资讯详情的接口，postman测试如下：

detail初始化为一个对象，代码如下，保存message列表中的第0个对象。

		data() {
			return {
				id: 0,
				detail: {}
			}
		},

---

现在我们来具体分析每一部分。

对于第一部分标题部分 

<template>
	<view class="news_detail">
		<text class="title">{{detail.title}}</text>
		<view class="info">
			<text>发表时间：{{detail.add_time | formatDate}}</text>
			<text>浏览：{{detail.click}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>

样式如下：

<style lang="scss">
	.news_detail{
		font-size: 30rpx;
		padding: 0 20rpx;
		.title{
			text-align: center;
			width: 710rpx;
			display: block;
			margin: 20rpx 0;
		}
		.info{
			display: flex;
			justify-content: space-between;
		}
	}
</style>

display为block，块级显示，否则是行内元素，使用display:block方便居中

---

对于第二部分信息部分，显示发表时间和浏览次数

<template>
	<view class="news_detail">
		<text class="title">{{detail.title}}</text>
		<view class="info">
			<text>发表时间：{{detail.add_time | formatDate}}</text>
			<text>浏览：{{detail.click}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>

 请求数据中返回如下：

 采用过滤器filter来规范化时间显示

我们来看下过滤器的代码：

Vue.filter('formatDate',(date)=>{
	const nDate = new Date(date)
	const year = nDate.getFullYear()
	const month = nDate.getMonth().toString().padStart(2,0)
	const day = nDate.getDay().toString().padStart(2,0)
	return year+'-'+month+'-'+day
})

 我们来看下样式

	.news_detail{
		font-size: 30rpx;
		padding: 0 20rpx;
		.title{
			text-align: center;
			width: 710rpx;
			display: block;
			margin: 20rpx 0;
		}
		.info{
			display: flex;
			justify-content: space-between;
		}
	}

 信息区我们采用flex布局，两端对齐

---

下面我们来看第三部分内容部分，

采用uniapp中的组件rich-text实现：

动态绑定nodes属性显示内容

<template>
	<view class="news_detail">
		<text class="title">{{detail.title}}</text>
		<view class="info">
			<text>发表时间：{{detail.add_time | formatDate}}</text>
			<text>浏览：{{detail.click}}</text>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>

请求返回数据如下：