fix:我的成长脚印页面展示优化
This commit is contained in:
@@ -80,11 +80,17 @@ 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 class="players-melee-inner">
|
||||||
<view
|
<view
|
||||||
v-for="(player, index) in players"
|
v-for="(player, index) in players"
|
||||||
:key="index"
|
:key="index"
|
||||||
@@ -102,6 +108,7 @@ defineProps({
|
|||||||
<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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user