fix:我的成长脚印页面展示优化
This commit is contained in:
@@ -80,28 +80,35 @@ 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
|
||||
v-for="(player, index) in players"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundColor: meleeAvatarColors[index],
|
||||
width: `${Math.max(100 / players.length, 18)}vw`,
|
||||
}"
|
||||
>
|
||||
<Avatar
|
||||
:src="player.avatar"
|
||||
:rankLvl="showRank ? undefined : player.rankLvl"
|
||||
:size="40"
|
||||
:rank="showRank ? index + 1 : 0"
|
||||
/>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view class="players-melee-inner">
|
||||
<view
|
||||
v-for="(player, index) in players"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundColor: meleeAvatarColors[index],
|
||||
width: `${Math.max(100 / players.length, 18)}vw`,
|
||||
}"
|
||||
>
|
||||
<Avatar
|
||||
:src="player.avatar"
|
||||
:rankLvl="showRank ? undefined : player.rankLvl"
|
||||
:size="40"
|
||||
:rank="showRank ? index + 1 : 0"
|
||||
/>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
</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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user