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,28 +80,35 @@ defineProps({
/> />
</view> </view>
</view> </view>
<view <!-- 大乱斗玩家列表scroll-view 作为横向滚动容器 -->
<!-- 小程序中 scroll-view 不支持直接 display:flex需内部 wrapper view 承载 flex 布局 -->
<!-- 仅当玩家 >5 内容溢出宽度时才阻止冒泡防止与外层 swiper 切换 tab 的手势冲突 -->
<scroll-view
v-if="players.length" v-if="players.length"
class="players-melee" class="players-melee"
scroll-x
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
:style="{ paddingTop: showHeader ? '15px' : '0' }" :style="{ paddingTop: showHeader ? '15px' : '0' }"
> >
<view <view class="players-melee-inner">
v-for="(player, index) in players" <view
:key="index" v-for="(player, index) in players"
:style="{ :key="index"
backgroundColor: meleeAvatarColors[index], :style="{
width: `${Math.max(100 / players.length, 18)}vw`, backgroundColor: meleeAvatarColors[index],
}" width: `${Math.max(100 / players.length, 18)}vw`,
> }"
<Avatar >
:src="player.avatar" <Avatar
:rankLvl="showRank ? undefined : player.rankLvl" :src="player.avatar"
:size="40" :rankLvl="showRank ? undefined : player.rankLvl"
:rank="showRank ? index + 1 : 0" :size="40"
/> :rank="showRank ? index + 1 : 0"
<text class="player-name">{{ player.name }}</text> />
<text class="player-name">{{ player.name }}</text>
</view>
</view> </view>
</view> </scroll-view>
</view> </view>
</template> </template>
@@ -144,17 +151,21 @@ defineProps({
justify-content: center; justify-content: center;
} }
.players-melee { .players-melee {
display: flex;
height: 80px; height: 80px;
width: 100%; width: 100%;
overflow-x: auto;
} }
.players-melee::-webkit-scrollbar { .players-melee::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
color: transparent; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

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