uniapp制作一个个人页面
1.成果展示
2.uniapp代码
<template> <view class="profile-container"> <view class="avatar-info"> <image class="avatar" src="../../static/tabs/头像.png" mode="aspectFill"></image> <text class="nickname">{{ nickname }}</text> </view> <view class="links"> <view class="link-item" @click="navigateToaboutUs"> <view class="item-content"> <image src="../../static/tabs/aboutUs.png" class="icon" mode="widthFix"></image> <text>关于我们</text> <image src="../../static/tabs/arrow.png" class="arrow" /> </view> </view> <view class="link-item" @click="navigateTojoinUs"> <view class="item-content"> <image src="../../static/tabs/joinUs.png" class="icon" mode="widthFix"></image> <text>加入我们</text> <image src="../../static/tabs/arrow.png" class="arrow" /> </view> </view> <view class="link-item" @click="navigateTousage"> <view class="item-content"> <image src="../../static/tabs/usage.png" class="icon" mode="widthFix"></image> <text>使用方法</text> <image src="../../static/tabs/arrow.png" class="arrow" /> </view> </view> <view class="link-item" @click="navigateTofeedback"> <view class="item-content"> <image src="../../static/tabs/feedback.png" class="icon" mode="widthFix"></image> <text>意见反馈</text> <image src="../../static/tabs/arrow.png" class="arrow" /> </view> </view> </view> <view class="link-item version-item"> <text class="version">版本：v1.0.0</text> <!-- 这里不需要跳转箭头，所以只添加了一个简单的文本 --> </view> </view>
</template> <script>
export default { data() { return { nickname: '民族一家亲' }; }, methods: { navigateToaboutUs() { uni.navigateTo({ url: "/pageA/contact/aboutUs"})},navigateTojoinUs() {uni.navigateTo({ url: "/pageA/contact/joinUs"})},navigateTousage() {uni.navigateTo({ url: "/pageA/contact/usage"})},navigateTofeedback() {uni.navigateTo({ url: "/pageA/contact/feedback"})}, }
}
</script>
<style scoped>
.profile-container { display: flex; flex-direction: column; align-items: center; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选，为整个容器添加阴影效果 */ background-color: #fff; /* 设置背景颜色 */ border-radius: 8px; /* 圆角边框 */ margin-top: 20px; /* 与页面顶部保持一定距离 */
} .avatar-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; /* 与下面的链接保持一定距离 */
} .avatar { width: 100px; height: 100px; border-radius: 50%; /* 圆形头像 */ border: 2px solid #fff; /* 可选，边框颜色 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 头像阴影效果 */ margin-bottom: 10px; /* 与昵称保持一定距离 */
} .nickname { font-size: 16px; color: #333; font-weight: bold; /* 昵称加粗 */
} .links { display: flex; flex-direction: column; align-items: center; width: 100%; /* 如果需要，可以限制链接列表的宽度 */
} .link-item { display: flex; align-items: center; margin-bottom: 10px; /* 每个链接项之间的间距 */ width: 100%; /* 链接项宽度 */ background-color: #f5f5f5; /* 背景色，可选 */ padding: 10px; /* 内边距 */ border-radius: 4px; /* 圆角 */
} .item-content { display: flex; align-items: center; justify-content: space-between; /* 图标、文本和箭头之间的间距 */ width: 100%;
} .icon { width: 30px; height: 30px; margin-right: -14px; /* 图标与文本之间的间距，可以根据需要调整 */
} .arrow { width: 15px; height: 15px; /* 其他样式，如transform: rotate(...)可以根据需要添加 */
}.version-item { display: flex; align-items: center; justify-content: center; margin-top: 20px; /* 与上面的链接列表保持一定距离 */ font-size: 14px; color: #666;
}
</style>3.注意事项
(1)代码是正确的，没有问题，需要自己根据需要替换图标、头像等；
(2)如果有什么uniapp上的问题，欢迎评论区留言。