热门

最新

红包

立Flag

投票

同城

发布
weixin_53051713
油麦菜你好
4 年前
trueweixin_53051713

小程序P177 15.登录与支付-用户信息-渲染用户的头像和昵称（接上一个）
2、渲染用户的头像和昵称
①在 my-userinfo 组件中，通过 mapState 辅助函数，将需要的成员映射到当前组件中使用：
// 按需导入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
computed: {
// 将 m_user 模块中的 userinfo 映射到当前页面中使用
...mapState('m_user', ['userinfo']),
},
data() {
return {}
},
}

②将用户的头像和昵称渲染到页面中：
<!-- 头像昵称区域 -->
<view class="top-box">
<image :src="userinfo.avatarUrl" class="avatar"></image>
<view class="nickname">{{userinfo.nickName}}</view>
</view>
评论
2
打赏
  • 复制链接
  • 举报
下一条：
小程序P177 15.登录与支付-用户信息-渲染用户的头像和昵称1、实现用户头像昵称区域的基本布局①在 my-userinfo 组件中，定义如下的 UI 结构：<template> <view class="my-userinfo-container"> <!-- 头像昵称区域 --> <view class="top-box"> <image src="" class="avatar"></image> <view class="nickname">xxx</view> </view> </view></template>②美化当前组件的样式：.my-userinfo-container { height: 100%; // 为整个组件的结构添加浅灰色的背景 background-color: #f4f4f4; .top-box { height: 400rpx; background-color: #c00000; display: flex; flex-direction: column; align-items: center; justify-content: center; .avatar { display: block; width: 90px; height: 90px; border-radius: 45px; border: 2px solid white; box-shadow: 0 1px 5px black; } .nickname { color: white; font-weight: bold; font-size: 16px; margin-top: 10px; } }}③在 my.vue 页面中，为最外层包裹性质的 view 容器，添加 class="my-container" 的类名，并美化样式如下：page,.my-container { height: 100%;}