scroll-view横向滚动+swiper纵向联动是uni-app实现网易云歌单滑动切换最稳定全端兼容方案，因swiper在小程序易卡顿、h5 touch行为不一致，而scroll-view原生滚动更可控且性能更稳。
scroll-view 横向滚动 + swiper 纵向内容联动，是 uni-app 实现网易云风格歌单列表滑动切换最稳定、全端兼容的方案。直接用 swiper 做 tab 切换在小程序里容易卡顿、H5 上 touch 行为不一致，scroll-view 才是真·可控。
为什么不能只用 swiper 控制 tab 切换
微信小程序里 swiper 的 current 变更会触发强制重绘，配合大量歌曲列表（尤其带封面图）时，iOS 小程序常出现“跳帧”或“延迟响应”；H5 端则可能因 CSS transform 未启用硬件加速导致滑动粘滞。scroll-view 的 scroll-x 是原生滚动，性能更稳，且能精准控制偏移量和宽度。
scroll-view 实现 tab 滑动条动态定位
关键不是让 tab 本身“滑动”，而是让底部那根高亮线（slide）跟随选中项平滑移动。需要手动计算两个值：sliderWidth（当前项宽度）和 sliderOffset（距离左侧起点的偏移）。
-
sliderWidth：根据文字长度或固定规则设置，比如首项「推荐」设为140rpx，其余统一60rpx -
sliderOffset：累加前面所有 tab 的宽度 + 间隙，例如第 0 项 offset=26rpx（预留左间距），第 1 项 offset=26 + 60 + 20 = 106rpx（20rpx 是 item 间 margin） - 必须在
switchNav中同步更新这两个值，并用:style绑定到slide元素上，不能靠 class 切换
swiper 和 scroll-view 宽高必须严格一致
如果外层 swiper-item 高度是 100vh，但内部 scroll-view 没设 height: 100% 或父容器没设 overflow: hidden，就会出现滚动区域错位、内容截断、下拉刷新失效等问题。
- 每个
swiper-item必须显式设置style="height: 100%"（或固定高度如80vh） -
scroll-view必须设height: 100%，且其父级（比如view）不能有 padding/margin 干扰实际可滚动区域 - H5 端若用
vh单位，需注意 iOS Safari 地址栏收放会改变vh值，建议改用calc(100vh - 100rpx)扣除 tabBar 高度
歌曲列表滚动与播放状态需解耦管理
网易云那种“滑动 tab 切换歌单，同时保持当前播放歌曲不中断”的体验，本质是 UI 层和音频逻辑层分离。别把 uni.createInnerAudioContext() 实例挂到某个页面 data 里——它会在 tab 切换时被销毁。
- 把音频实例提至全局 store（如 Pinia）或
main.js中的 globalData - 每个歌单列表只负责渲染和触发
play(id)，不管理 audio 对象生命周期 - 监听
onHide和onShow手动暂停/恢复，否则小程序后台时音频还会响（尤其安卓）
横向 tab 的滚动惯性、点击高亮、线段动画这些细节，看似是 UI 问题，实则牵扯到底层滚动事件是否被拦截、rpx 计算精度、以及不同端对 transform: translateX() 的渲染差异。最容易被忽略的是：iOS 微信小程序里，scroll-view 的 scroll-left 在快速连续点击后可能不同步，必须加防抖并 fallback 到 scrollIntoView。
