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上的问题,欢迎评论区留言。

相关推荐
2501_915909061 天前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程猪猪侠1 天前
uni-app与Vue3,实现3D圆柱形旋转画廊效果
3d·uni-app
BUG创建者1 天前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html
编程迪1 天前
找活招工系统源码 雇员雇主小程序 后端JAVA前端uniapp
java·spring boot·uni-app
不吃香菜的猪1 天前
uniapp中使用echarts并且支持pc端的拖动、拖拽和其他交互事件
uni-app·echarts·交互
伍哥的传说1 天前
Uni-App + Vue onLoad与onLaunch执行顺序问题完整解决方案 – 3种实用方法详解
javascript·vue.js·uni-app·事件总线·onlaunch·onload·promise状态管理
金州_拉文2 天前
uniapp
前端·uni-app
懒大王95272 天前
uniapp 开发上架 iOS App全流程
uni-app
yuehua_zhang2 天前
uni app 的app 端调用tts 进行文字转语音
前端·javascript·uni-app
小浣熊喜欢揍臭臭2 天前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app