haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make home channel bar horizontally scrollable

Browse Source
This commit is contained in:
hajimi
2026-08-02 00:25:51 +08:00
parent 86e5dc5a74
commit 9cbf5f6818
3 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/index/index.vue
+25 -10
View File
@@ -14,12 +14,14 @@
</view>
<view class="channel-bar">
<view class="channel-bar__list">
<view v-for="item in primaryChannels" :key="item.channelKey" class="channel-bar__item"
:class="{ 'channel-bar__item--active': currentChannel === item.index }" @tap="switchChannel(item.index)">
<text>{{ item.name }}</text>
<scroll-view scroll-x class="channel-bar__scroll" show-scrollbar="false">
<view class="channel-bar__list">
<view v-for="item in primaryChannels" :key="item.channelKey" class="channel-bar__item"
:class="{ 'channel-bar__item--active': currentChannel === item.index }" @tap="switchChannel(item.index)">
<text>{{ item.name }}</text>
</view>
</view>
</view>
</scroll-view>
<view class="channel-bar__more" @tap="goChannelManage">
<text>更多</text>
<UIcon name="arrow-down" size="22" color="#667085" />
@@ -488,16 +490,27 @@ onUnload(() => uni.$off('channelChanged', onChannelChanged))
background: #fff;
border-bottom: 1rpx solid #edf0f5;
&__list {
min-width: 0;
&__scroll {
flex: 1;
display: flex;
min-width: 0;
height: 86rpx;
white-space: nowrap;
}
&__list {
display: inline-flex;
align-items: stretch;
min-width: 100%;
height: 100%;
padding: 0 12rpx;
gap: 12rpx;
box-sizing: border-box;
white-space: nowrap;
}
&__item {
flex: 1;
min-width: 0;
flex: 0 0 116rpx;
width: 116rpx;
position: relative;
display: flex;
justify-content: center;
@@ -508,6 +521,8 @@ onUnload(() => uni.$off('channelChanged', onChannelChanged))
overflow: hidden;
text {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}