微信小程序-个人信息页面-代码分享

文章目录

• 实现效果
• 一、代码
• 二、代码分析
  • 1.<navigator>
• 总结

---

实现效果

提示：前端框架依旧是熟悉的uni-app和vue.js

 

---

一、代码

提示：这次代码的可移植性是相对灵活的，页面的主体部分是for循环出来的，改变文字和图像地址可以迅速改变页面的展示内容。

 

<template>
	<view class="allContain">
		<view class="head">
			<img class="imge" :src="userInfoList.avatar" alt="" />
			<text class="nickname">{{userInfoList.nickName}}</text>
		</view>
		<view class="body">
			<navigator class="item" v-for="item in itemList" :key="item.id" :url="item.url">
				<img class="icon" :src="item.src"/>
				<text class="text">{{item.text}}</text>
				<img class="inter" src="../../static/向右.png"/>
			</navigator>
		</view>
		<view class="foot">
			<button class="btn" type="default">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	
	let userInfoList = reactive({
		avatar:'../../static/头像.png',
		nickName:'张三'
	});
	
	let itemList = ref([
		{
			id:0,							//列表id
			src:'../../static/资料.png',	    //图标地址
			text:'我的资料',					//显示文字
			url:'xxx'						//跳转地址
		},
		{
			id:1,
			src:'../../static/隐私协议.png',
			text:'隐私协议',
			url:'xxx'
		},
		{
			id:2,
			src:'../../static/用户协议.png',
			text:'用户协议',
			url:'xxx'
		},
		{
			id:3,
			src:'../../static/帮助与反馈.png',
			text:'帮助与反馈',
			url:'xxx'
		},
		{
			id:4,
			src:'../../static/关于.png',
			text:'关于',
			url:'xxx'
		},
		{
			id:5,
			src:'../../static/设置.png',
			text:'设置',
			url:'xxx'
		}
	])
	

</script>

<style lang="scss">
	page{
		background: #f6f6f7;
	}  
	.allContain{
		position: relative;
		background: #f6f6f7;
		top: 0px;
		.head{
			position: relative;
			height: 305rpx;
			background: #fff;
			.imge{
				position: absolute;
				left: 70rpx;
				top: 65rpx;
				width: 175rpx;
				height:	175rpx;
				border-radius: 90rpx;
			}
			.nickname{
				position: absolute;
				top: 116rpx;
				left: 275rpx;
				font-size: 46rpx;
			}
		}
		.body{
			position: relative;
			top: 25rpx;
			height: 675rpx;
			.item{
				position: relative;
				height: 100rpx;
				background: #fff;
				font-size: 38rpx;
				margin-bottom: 15rpx;	
			}
			.text{
				position: absolute;
				top: 24%;
				left: 118rpx;
				
			}
			.icon{
				position: absolute;
				top: 26%;
				left: 38rpx;
				width: 50rpx;
				height: 50rpx;
			}
			.inter{
				position: absolute;
				top: 30%;
				right: 40rpx;
				width: 40rpx;
				height: 40rpx;
			}		
				
		}
		.foot{
			position: relative;
			top: 85rpx;
			background: #f6f6f7;
			.btn{
				position: absolute;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				color: #03b385;
				font-size: 38rpx;
			}
		}
	}       
</style>

 

二、代码分析

1.<navigator>

        它是页面跳转，该组件类似HTML中的<a>组件，但只能跳转本地页面，目标页面必须在pages.json中注册。是uni-app官网“路由与页面跳转”中的组件。

        示例中的代码：

<view class="body">
    <navigator class="item" v-for="item in itemList" :key="item.id" :url="item.url">
          <img class="icon" :src="item.src"/>
          <text class="text">{{item.text}}</text>
          <img class="inter" src="../../static/向右.png"/>
    </navigator>
</view>

---

总结

        以上代码仅供参考。