uniapp个人信息页面
时间: 2023-09-17 15:14:06 浏览: 198
Uniapp个人信息页面可以是一个用于展示用户个人信息的页面,通常包括用户头像、昵称、性别、生日、联系方式等基本信息。以下是一个简单的Uniapp个人信息页面示例:
```html
<template>
<view class="personal-info">
<image class="avatar" :src="userInfo.avatar"></image>
<view class="info-item">
<text class="label">昵称:</text>
<text class="value">{{ userInfo.nickname }}</text>
</view>
<view class="info-item">
<text class="label">性别:</text>
<text class="value">{{ userInfo.gender }}</text>
</view>
<view class="info-item">
<text class="label">生日:</text>
<text class="value">{{ userInfo.birthday }}</text>
</view>
<view class="info-item">
<text class="label">联系方式:</text>
<text class="value">{{ userInfo.contact }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {
avatar: 'https://example.com/avatar.jpg',
nickname: '小明',
gender: '男',
birthday: '1990-01-01',
contact: '13888888888'
}
};
}
};
</script>
<style scoped>
.personal-info {
display: flex;
flex-direction: column;
align-items: center;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.info-item {
display: flex;
margin-top: 10px;
}
.label {
width: 80px;
text-align: right;
}
.value {
margin-left: 10px;
}
</style>
```
这是一个简单的个人信息页面,其中使用了`<image>`标签来展示用户头像,`<text>`标签来展示其他信息。通过Uniapp的数据绑定功能,可以将用户信息动态地展示在页面上。你可以根据实际需求进行样式和布局的调整。