如何用uni-app优化资讯详情页的布局？
摘要：一、概述 上一篇文章，已经实现了资讯列表跳转详情并传递id 接下来实现，资讯详情页面数据渲染 效果如下： 二、资讯详情页面结构 修改 pagesnewsnews-detail文件，固定一行数据 <template&
一、概述
上一篇文章，已经实现了资讯列表跳转详情并传递id
接下来实现，资讯详情页面数据渲染
效果如下：
二、资讯详情页面结构
修改 pages/news/news-detail文件，固定一行数据
<template>
<view>
<!-- 资讯页 点击跳转-->
<view class="news_detail">
<view>
<text>1季度多家房企利润跌幅超50% 去库存促销战打响</text>
<view class="info">
<text>2015-04-16</text>
<text>浏览：3</text>
</view>
<view class="content">
<text>
房企一季度销售业绩已经陆续公布，克而瑞研究中心统计数据显示，今年一季度，TOP20的房企仅6家实现业绩同比增长。
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: ''
}
},
//页面加载拿到传递来的参数id值
onLoad(value) {
this.id = value.id;
console.log("onload拿到id", value);
},
methods: {
}
}
</script>
<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;
// 子元素自动水平排列
flex-direction: row;
}
.content {
margin-top: 10px;
}
}
</style>
编译代码，运行效果如下：
三、调用api接口
//发送请求 传入id获取资讯详情
async getNewsDetail() {
const res = await this.$http.get('/api/getnew/' + this.id, {})
this.detail = res.message[0];
console.log("id:" + this.id + " 资讯数据", this.detail);
}
四、数据渲染
rich-text
官方文档：https://uniapp.dcloud.net.cn/component/rich-text.html#rich-text
注意：由于api接口返回的详情内容是一段html代码，因此需要使用rich-text组件来渲染。