uniapp 微信小程序文章详情页顶部标题动态对应文章列表页返回的标题

news2025/10/31 2:32:04

文章详情页代码图：
在这里插入图片描述
代码：
template

<template>
	<view class="policy-detail">
		<view class="title">{{description}}</view>
		<view class="time">{{createTime}}</view>
		<view class="info">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

script

<script>
	var http = require("../../utils/http.js");
	var config = require("../../utils/config.js");
	export default {
		data() {
			return {
				policyId:'',
				title:'',
				description:'',
				createTime:'',
				content:''
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options.policyId)
			this.policyId = options.policyId
			this.getPolicyDetail()
		},
		methods: {
			getPolicyDetail:function(){
				uni.showLoading();
				var params = {
					url: "/***/***",
					method: "GET",
					data: {
						policyId: this.policyId
					},
					callBack: res => {
						this.policyContent = res.data
						this.title = res.data.title 
						this.description = res.data.description 
						this.createTime = res.data.createTime 
						this.content = res.data.content
						uni.setNavigationBarTitle({
							title: this.title
						});
						uni.hideLoading()
					},
				};
				http.request(params);
			},
		}
	}
</script>

style

<style>
	page {
		background: #f9f9f9;
	}
	.policy-detail{
		padding: 30rpx;
	}
	.title{
		font-size: 32rpx;
		text-align: center;
		color: #333333;
		margin-top: 35rpx;
	}
	.time{
		font-size: 25rpx;
		color: #666666;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		text-align: right;
	}
	.info{
		font-size: 32rpx;
		color: #333333;
	}
</style>