自定义header

最新推荐文章于 2025-02-26 16:28:23 发布

F2601775592

最新推荐文章于 2025-02-26 16:28:23 发布

阅读量544

点赞数 16

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/F2601775592/article/details/135628773

版权

本文介绍了如何在Vue项目中使用模板和组件创建一个包含银行图标和标题的头部导航栏，以及实现点击后返回上一页的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="headbox">
		<image class="bankicon" src="@/static/image/head/bankicon.png" @click="bank()" mode=""></image>
		<text class="titlecls">{{ title }}</text>
		<text></text>
	</view>
</template>

<script>
	export default {
	  props: ['title'],// 接收传入的标题数据
		methods: {
			// 返回
			bank() {
				uni.navigateBack({
					delta: 1  //返回上一页
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.headbox {
		width: 100%;
		height: 166rpx;
		background-image: url(@/static/image/head/headbg.png);
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.bankicon {
			width: 80rpx;
			height: 88rpx;
			margin-top: 70rpx;
		}
		.titlecls {
			font-size: 34rpx;
			color: #fff;
			font-weight: bold;
			margin-top: 70rpx;
			margin-left: -7%;
		}
	}
</style>

在main.js里引入

import Header from '@/components/head/index.vue'; // 引入Header组件

Vue.component('Header',Header)

在页面直接使用