直接用 fixed 定位 + flex 横向对齐最稳妥，因 sticky 或滚动监听在 ios 微信小程序易触发渲染抖动，安卓低端机也卡顿；作者头像、昵称、认证标识、关注按钮须同排，右侧按钮宽度固定（如120rpx）防错位。
uni-app 详情页底部作者信息怎么布局
直接用 fixed 定位 + flex 横向对齐是最稳妥的，小红书原生 App 和多数仿写项目都这么干。别用 sticky 或滚动监听来动态显示/隐藏——在 iOS 微信小程序里容易触发渲染抖动，安卓部分低端机也会卡顿。
关键点是：作者头像、昵称、认证标识、关注按钮这四块必须放在同一行，且右侧按钮宽度固定（比如 120rpx），避免因昵称长度不一导致整体错位。
示例结构：
<view class="author-bar" style="position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #f0f0f0;"><image :src="note.authorAvatar" class="avatar"></image><view class="info"><text class="name">{{ note.authorName }}</text><view v-if="note.isVerified" class="verified"></view></view><button class="follow-btn">{{ isFollowing ? '已关注' : '关注' }}</button>
</view>
为什么不能直接用 rich-text 渲染作者简介
很多开发者想复用笔记正文的富文本逻辑，把作者简介也塞进 <rich-text></rich-text>，结果发现：rich-text 在小程序里会强制创建独立 WebView 上下文，和页面主体渲染不同步；一旦作者简介含换行或 emoji，iOS 端大概率出现文字截断、行高异常、甚至整个 rich-text 区域空白。
真实场景中，作者简介基本是纯文本（最多带一两个 \n），用 <text></text> + line-height + display: -webkit-box 截断更可控。
推荐写法：
<text class="bio" :decode="true">{{ note.authorBio }}</text>
class="bio" 对应样式：
.bio {
font-size: 24rpx;
line-height: 36rpx;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
关注按钮状态同步容易漏掉的三个地方
-
onLoad时没调用接口查当前用户是否已关注该作者，导致初始状态错误（比如实际已关注，但 UI 显示“关注”） - 点击按钮后只改了本地
isFollowing变量，没同步更新note.followerCount，用户再进详情页时数字还是旧的 - 在 H5 端没加
v-if="!$scope.$mp?.platform"判断就用了小程序专属的uni.showToast，导致 H5 报错
建议统一走一个 updateFollowStatus() 方法，内部根据平台调用 uni.showToast 或 alert，并同时更新两个响应式字段。
适配多端时作者头像的尺寸和圆角怎么设
小红书风格要求头像严格为圆形、无边框、边缘不压字。但微信小程序的 border-radius: 50% 在某些安卓机型上会渲染出轻微椭圆，H5 端又容易被父容器 overflow: hidden 剪掉像素。
最稳方案是：
- 头像图片本身裁成正方形（服务端返回或前端用 canvas 裁）
- CSS 中用
width: 80rpx; height: 80rpx; border-radius: 50%; - 在
pages.json的usingComponents里不引入任何第三方 avatar 组件——它们往往自带 padding/margin，破坏底部栏高度一致性
注意：不要给头像外层 <view></view> 设 overflow: hidden，uni-app 的 image 组件自身支持 mode="aspectFill"，配合圆角就能干净裁切。
