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

文章详情页代码图:
在这里插入图片描述
代码:
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>

猜你喜欢

转载自blog.csdn.net/maoge_666/article/details/131824493