uniapp我的 页面

创建或自定义 UniApp 的“我的页面”
在 UniApp 中创建或自定义“我的页面”，可以遵循标准的 Vue 组件结构并利用框架提供的特性来构建个性化界面。下面是一个详细的指南：
页面布局
对于“我的页面”的 HTML 部分，采用 <template> 定义视图层的内容。这里展示了一个简单的例子，其中包含了头像、用户名以及一些功能按钮。
<template>
<view class="my-page">
<!-- 用户信息 -->
<view class="user-info">
<image :src="avatarUrl"></image> <!-- 头像 -->
<text>{{ userName }}</text> <!-- 昵称 -->
</view>

<!-- 功能列表 -->
<view class="function-list">
<navigator url="/pages/settings/settings">设置</navigator>
<navigator url="/pages/help/help">帮助中心</navigator>
<button @click="logout()">退出登录</button>
</view>
</view>
</template>
登录后复制
脚本逻辑
脚本部分使用了 Vue 和 uni-app 提供的功能来进行数据绑定和事件处理。此段代码展示了如何初始化用户资料，并提供登出操作的方法。
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 初始化变量
const avatarUrl = ref('https://example.com/avatar.png');
const userName = ref('默认昵称');

onLoad(() => {
// 可在此处加载用户的实际信息
});

function logout() {
uni.showModal({
title: '提示',
content: '确认要退出吗？',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
// 执行登出逻辑...
}
},
});
}
</script>
登录后复制
样式设计
为了使页面看起来更美观，可以通过 SCSS 来编写样式表单，确保样式的局部作用域不会影响其他组件。
<style lang="scss" scoped>
.my-page {
padding: 20px;

.user-info {
display: flex;
align-items: center;

image {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 10px;
}

text {
font-size: 36rpx;
color: #333;
}
}

.function-list navigator,
button {
display: block;
margin-top: 20px;
background-color: #f7f7f7;
padding: 10px;
border-radius: 8px;
text-align: center;
}
}
</style>
登录后复制
上述代码片段提供了创建一个基本“我的页面”的方法[^1]。通过调整这些基础元素，可以根据具体需求进一步定制页面外观与行为。