前言上一篇我们实现了点赞、评论、关注列表数据显示本篇进入交互体验升级头像点击跳转、用户主页传参、全局跳转统一、样式与交互规范让项目达到上线标准。一、核心跳转逻辑点击头像 → 进入用户主页统一跳转方法所有页面使用同一个跳转方法保证后期易维护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. 点赞列表头像 整行跳转vueimage classavatar :srcitem.avatar click.stopgoUserCenter(item) /image view classitem clickgoUserCenter(item) !-- 内容 -- /view2. 评论列表完善跳转 评论内容兜底vuetext classcontent 评论{{ item.content || 无评论内容 }} /text image classavatar click.stopgoUserCenter(item) /image3. 粉丝 / 关注列表统一跳转体验vueview classitem v-for(item,index) in list clickgoUserCenter(item) image classavatar :srcitem.avatar click.stopgoUserCenter(item) /image /view三、个人主页接收参数blog_host.vuejavascript运行onLoad(options) { // 接收跳转过来的用户ID if (options.host_id) { this.hostId options.host_id this.loadUserInfo() // 加载该用户主页数据 } }四、全局样式与交互统一项目必做1. 加载动画统一所有页面使用同款 loading避免视觉混乱。2. 空状态提示统一点赞暂无点赞评论暂无评论粉丝还没有人关注你3. 列表样式统一卡片圆角 24rpx头像 80rpx 圆形字体大小、间距全局一致4. 请求格式统一所有接口POSTContent-Type: application/jsonJSON.stringify发送数据统一错误捕获与加载关闭五、最终效果一览✅ 登录缓存彻底稳定 ✅ 点赞 / 评论 / 关注列表数据正常显示 ✅ 头像 / 整行点击均可跳转他人主页 ✅ 跳转传参不丢失、不报错 ✅ 全局样式、加载、空状态统一 ✅ 后端接口逻辑清晰无冗余代码六、项目可直接上线的小建议把接口地址抽成全局配置方便切换环境请求封装成公用 request减少重复代码增加防抖防止重复点击图片添加懒加载与错误兜底图跳转前判断用户是否登录
uniapp 互动页面跳转完善（头像跳转→个人主页→全局统一规范）
前言上一篇我们实现了点赞、评论、关注列表数据显示本篇进入交互体验升级头像点击跳转、用户主页传参、全局跳转统一、样式与交互规范让项目达到上线标准。一、核心跳转逻辑点击头像 → 进入用户主页统一跳转方法所有页面使用同一个跳转方法保证后期易维护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. 点赞列表头像 整行跳转vueimage classavatar :srcitem.avatar click.stopgoUserCenter(item) /image view classitem clickgoUserCenter(item) !-- 内容 -- /view2. 评论列表完善跳转 评论内容兜底vuetext classcontent 评论{{ item.content || 无评论内容 }} /text image classavatar click.stopgoUserCenter(item) /image3. 粉丝 / 关注列表统一跳转体验vueview classitem v-for(item,index) in list clickgoUserCenter(item) image classavatar :srcitem.avatar click.stopgoUserCenter(item) /image /view三、个人主页接收参数blog_host.vuejavascript运行onLoad(options) { // 接收跳转过来的用户ID if (options.host_id) { this.hostId options.host_id this.loadUserInfo() // 加载该用户主页数据 } }四、全局样式与交互统一项目必做1. 加载动画统一所有页面使用同款 loading避免视觉混乱。2. 空状态提示统一点赞暂无点赞评论暂无评论粉丝还没有人关注你3. 列表样式统一卡片圆角 24rpx头像 80rpx 圆形字体大小、间距全局一致4. 请求格式统一所有接口POSTContent-Type: application/jsonJSON.stringify发送数据统一错误捕获与加载关闭五、最终效果一览✅ 登录缓存彻底稳定 ✅ 点赞 / 评论 / 关注列表数据正常显示 ✅ 头像 / 整行点击均可跳转他人主页 ✅ 跳转传参不丢失、不报错 ✅ 全局样式、加载、空状态统一 ✅ 后端接口逻辑清晰无冗余代码六、项目可直接上线的小建议把接口地址抽成全局配置方便切换环境请求封装成公用 request减少重复代码增加防抖防止重复点击图片添加懒加载与错误兜底图跳转前判断用户是否登录
