其他分享
首页 > 其他分享> > 基于《黑马商城》项目,分析资讯详情列表的实现(uniapp中rich-text的使用)

基于《黑马商城》项目,分析资讯详情列表的实现(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>

请求返回数据如下:

 

标签:uniapp,title,text,detail,如下,display,rich,id,页面
来源: https://blog.csdn.net/lz9866/article/details/121179651