fix:我的成长脚印页面展示优化

This commit is contained in:
2026-05-12 09:54:07 +08:00
parent 5e69cd1d47
commit a79486ad50
2 changed files with 33 additions and 22 deletions

View File

@@ -80,11 +80,17 @@ defineProps({
/>
</view>
</view>
<view
<!-- 大乱斗玩家列表scroll-view 作为横向滚动容器 -->
<!-- 小程序中 scroll-view 不支持直接 display:flex需内部 wrapper view 承载 flex 布局 -->
<!-- 仅当玩家 >5 内容溢出宽度时才阻止冒泡防止与外层 swiper 切换 tab 的手势冲突 -->
<scroll-view
v-if="players.length"
class="players-melee"
scroll-x
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
:style="{ paddingTop: showHeader ? '15px' : '0' }"
>
<view class="players-melee-inner">
<view
v-for="(player, index) in players"
:key="index"
@@ -102,6 +108,7 @@ defineProps({
<text class="player-name">{{ player.name }}</text>
</view>
</view>
</scroll-view>
</view>
</template>
@@ -144,17 +151,21 @@ defineProps({
justify-content: center;
}
.players-melee {
display: flex;
height: 80px;
width: 100%;
overflow-x: auto;
}
.players-melee::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.players-melee > view {
/* 小程序 scroll-view 不支持直接 flex通过内层 wrapper 承载横向排列 */
.players-melee-inner {
display: flex;
height: 100%;
flex-wrap: nowrap;
}
.players-melee-inner > view {
display: flex;
flex-direction: column;
align-items: center;

View File

@@ -115,7 +115,7 @@ onLoad((options) => {
:blueTeam="item.teams[1] ? item.teams[1].players : []"
:redTeam="item.teams[2] ? item.teams[2].players : []"
:winner="item.winTeam"
:showRank="item.teams[0]"
:showRank="!!item.teams[0]"
:showHeader="false"
/>
</view>
@@ -138,7 +138,7 @@ onLoad((options) => {
:blueTeam="item.teams[1] ? item.teams[1].players : []"
:redTeam="item.teams[2] ? item.teams[2].players : []"
:winner="item.winTeam"
:showRank="item.teams[0]"
:showRank="!!item.teams[0]"
:showHeader="false"
/>
</view>