uniapp个人首页代码
时间: 2023-08-17 09:05:51 浏览: 74
以下是一个简单的Uniapp个人首页代码示例:
```
<template>
<view class="container">
<!-- 用户头像 -->
<image class="avatar" :src="userInfo.avatar"></image>
<!-- 用户昵称 -->
<text class="nickname">{{userInfo.nickname}}</text>
<!-- 个人简介 -->
<text class="intro">{{userInfo.intro}}</text>
<!-- 个人作品展示 -->
<view class="works">
<view class="work" v-for="(work, index) in userInfo.works" :key="index">
<image class="work-image" :src="work.image"></image>
<text class="work-title">{{work.title}}</text>
</view>
</view>
<!-- 个人动态 -->
<view class="dynamic">
<view class="dynamic-item" v-for="(item, index) in userInfo.dynamic" :key="index">
<text class="dynamic-text">{{item.text}}</text>
<image class="dynamic-image" :src="item.image"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {
avatar: 'https://xxx.com/avatar.jpg',
nickname: 'Uniapp用户',
intro: '这是我的个人简介',
works: [
{
image: 'https://xxx.com/work1.jpg',
title: '作品1'
},
{
image: 'https://xxx.com/work2.jpg',
title: '作品2'
}
],
dynamic: [
{
text: '今天天气真好',
image: ''
},
{
text: '刚刚发布了一篇文章',
image: 'https://xxx.com/article.jpg'
}
]
}
}
}
}
</script>
<style>
.container {
padding: 20px;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
.nickname {
font-size: 24px;
margin-top: 10px;
}
.intro {
margin-top: 10px;
}
.works {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.work {
width: 100px;
margin-right: 10px;
margin-bottom: 10px;
}
.work-image {
width: 100%;
height: 100px;
border-radius: 5px;
}
.work-title {
font-size: 14px;
margin-top: 5px;
}
.dynamic {
margin-top: 20px;
}
.dynamic-item {
display: flex;
margin-bottom: 10px;
}
.dynamic-text {
flex: 1;
font-size: 14px;
}
.dynamic-image {
width: 80px;
height: 80px;
border-radius: 5px;
margin-left: 10px;
}
</style>
```
这段代码实现了一个简单的个人首页,包括用户头像、昵称、个人简介、个人作品展示和个人动态等模块。其中,使用了Uniapp提供的组件和数据绑定语法,可以快速地实现跨平台的应用程序。