前言

上一篇我们实现了点赞、评论、关注列表数据显示，本篇进入交互体验升级：头像点击跳转、用户主页传参、全局跳转统一、样式与交互规范，让项目达到上线标准。

---

一、核心跳转逻辑：点击头像 → 进入用户主页

统一跳转方法

所有页面使用同一个跳转方法，保证后期易维护：

javascript

运行

goUserCenter(item) {
  if (!item || !item.user_id) {
    uni.showToast({ title: '用户不存在', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: `/pages/blog/blog_host?host_id=${item.user_id}`
  })
}

跳转规则（全局统一）

• 点击 头像 → 跳转
• 点击 用户名 → 跳转
• 点击 列表整行 → 跳转
• 使用 @click.stop 防止事件冒泡

---

二、三大页面跳转完善（直接复制可用）

1. 点赞列表：头像 + 整行跳转

vue

<image 
  class="avatar" 
  :src="item.avatar" 
  @click.stop="goUserCenter(item)"
></image>

<view class="item" @click="goUserCenter(item)">
  <!-- 内容 -->
</view>

2. 评论列表：完善跳转 + 评论内容兜底

vue

<text class="content">
  评论：{{ item.content || '无评论内容' }}
</text>

<image 
  class="avatar" 
  @click.stop="goUserCenter(item)"
></image>

3. 粉丝 / 关注列表：统一跳转体验

vue

<view 
  class="item" 
  v-for="(item,index) in list" 
  @click="goUserCenter(item)"
>
  <image 
    class="avatar" 
    :src="item.avatar" 
    @click.stop="goUserCenter(item)"
  ></image>
</view>

---

三、个人主页接收参数（blog_host.vue）

javascript

运行

onLoad(options) {
  // 接收跳转过来的用户ID
  if (options.host_id) {
    this.hostId = options.host_id
    this.loadUserInfo() // 加载该用户主页数据
  }
}

---

四、全局样式与交互统一（项目必做）

1. 加载动画统一

所有页面使用同款 loading，避免视觉混乱。

2. 空状态提示统一

• 点赞：暂无点赞～
• 评论：暂无评论～
• 粉丝：还没有人关注你～

3. 列表样式统一

• 卡片圆角 24rpx
• 头像 80rpx 圆形
• 字体大小、间距全局一致

4. 请求格式统一

所有接口：

• POST
• Content-Type: application/json
• JSON.stringify 发送数据
• 统一错误捕获与加载关闭

---

五、最终效果一览

✅ 登录缓存彻底稳定 ✅ 点赞 / 评论 / 关注列表数据正常显示 ✅ 头像 / 整行点击均可跳转他人主页 ✅ 跳转传参不丢失、不报错 ✅ 全局样式、加载、空状态统一 ✅ 后端接口逻辑清晰，无冗余代码

---

六、项目可直接上线的小建议

1. 把接口地址抽成全局配置，方便切换环境
2. 请求封装成公用 request，减少重复代码
3. 增加防抖，防止重复点击
4. 图片添加懒加载与错误兜底图
5. 跳转前判断用户是否登录