用scroll-view实现电台列表横向滑动需设scroll-x="true"、white-space: nowrap，子项用inline-block或flex-shrink: 0；手动控制scroll-left并缓存位置防回顶；复用播放器页通过channelid传参动态请求数据；联动backgroundaudiomanager监听播放状态实现高亮。
电台列表怎么用 scroll-view 实现横向滑动
uni-app 里没有原生的「可滚动标签栏」组件，scroll-view 是最稳妥的选择，尤其适合电台频道这类固定分类、需左右滑动切换的场景。
常见错误是直接套用 swiper —— 它默认带动画、自动轮播、且在小程序中对 touchmove 响应不如 scroll-view 稳定，容易卡顿或误触发切换。
- 必须加
scroll-x="true"和white-space: nowrap（写在父容器样式里），否则内容会换行挤成一列 - 子项用
display: inline-block或flex-shrink: 0防止被压缩 - 微信小程序真机上，
scroll-with-animation设为false更顺滑；H5 端可设为true加过渡 - 别忘了加
:scroll-left="currentScrollLeft"手动控制滚动位置，否则切换 tab 时无法自动居中高亮项
点击频道后如何复用同一播放器页面
电台频道本质是不同数据源的播放列表，没必要为每个频道建独立页面。关键在于路由传参 + 统一播放器逻辑复用。
典型做法是：所有频道页都跳转到 /pages/player/index?channelId=1001，然后在 onLoad 里根据 channelId 请求对应接口。
- 接口地址要动态拼接，比如
https://api.example.com/dj/recommend?rid=${channelId} - 播放器页的
data里不要写死歌曲数组，而是留空songList: []，靠请求填充 - 用
uni.setStorageSync('currentChannel', channelId)缓存当前频道，避免切后台再回来丢失上下文 - 注意：微信小程序里
onShow不会重新触发onLoad，所以频道切换后若需要刷新，得手动调getSongList()
如何让电台列表支持「正在播放」状态高亮
网易云电台列表里，当前播放频道会带红点或加粗，这个状态不能只靠 UI 标记，得和音频上下文联动。
核心是监听 uni.getBackgroundAudioManager() 的 play 和 pause 事件，并同步更新频道列表的渲染状态。
- 在频道列表页的
onShow中调用uni.getBackgroundAudioManager().onPlay(...)，更新本地isPlaying字段 - 列表渲染用
:class="{ active: item.id === currentPlayingId }"，而不是简单判断是否等于当前频道 ID —— 因为用户可能从其他页面切进来，正在播的是另一个频道 - 别漏掉
onStop和onError，否则播放中断后红点残留 - H5 端要注意：
BackgroundAudioManager在非 HTTPS 下不工作，测试时务必用https://或本地localhost
为什么电台列表滚动后回到顶部？怎么保持位置
这是 uni-app 的典型坑：页面 onHide → onShow 时，scroll-view 的滚动位置不会自动保存，导致每次切回来都回顶。
解决方案不是靠 scroll-into-view（它只认 id，不适合动态列表），而是手动存取 scroll-left 值。
- 在
scroll-view的@scroll事件里，用uni.setStorageSync('radioScrollLeft', e.detail.scrollLeft)记录位置 -
onShow时读取并赋给currentScrollLeft数据字段，再通过:scroll-left绑定过去 - 注意兼容性：App 端
@scroll触发频率低，建议加防抖；小程序端没问题 - 如果频道数量少（swiper +
indicator更省事，但交互感弱于原生滚动
电台列表真正的难点不在滚动或渲染，而在状态同步——播放器、路由参数、本地缓存、滚动位置四者必须严格对齐，差一个就出现「播着A频道，高亮B频道，滚动条却停在C频道」这种错乱。
