Question

我一直在尝试寻找此问题的原因/解决方案时遇到一些重大问题。它似乎只有在我在移动设备上查看我的应用时才会这样做，即使那样也很奇怪，因为行为并不总是一致的。

我正在编写一个应用程序，其中有一堆行，其中许多行的末尾都有一个 b-dropdown（以允许使用小的上下文菜单）。在这种情况下，这些行嵌套在 b-tab 的内容中。

主要问题是，当点击 b-dropdown 箭头时，有时下拉菜单会打开得很好，但有时（尤其是当点击一个必须向下滚动页面时）它会跳得更高在页面上，这会导致下拉菜单不在页面上。更重要的是，它似乎也“冻结”了页面的滚动，所以我无法尝试回到它应该的位置。（当下拉菜单呈现良好时也会发生冻结；它不会让我在下拉菜单打开时滚动页面）。

这是一些片段的尝试（代码实际上被分解成几个文件；主应用程序、选项卡的代码，然后是每一行的代码）；该应用是一款棋盘游戏的辅助应用。

App.vue

<template>
  <div id="app">
    <b-container fluid class="main-app">
      <b-row align-v="center">
        ... HEADER STUFF ...
      </b-row>
      <b-row>
        <b-tabs content-class="mt-3">
          <b-tab title="CPs" active>
            ... FIRST TAB ...
          </b-tab>
          <b-tab title="Tech">
            ... SECOND TAB ...
          </b-tab>
          <b-tab title="Ships">
            <ShipTab v-bind:psheet="this"
                       v-bind:ships="ships"
                       v-bind:techs="techs" />
          </b-tab>
          <b-tab title="History">
            ... FOURTH TAB ...
          </b-tab>
        </b-tabs>
      </b-row>
    </b-container>
  </div>  
</template>

ShipTab.vue

<template>
  <b-container fluid class="ship-tab">
    <b-row>
      <b-col class="section-header"><strong>Non-Grouped Ships</strong></b-col>
    </b-row>
    <ShipRow
        v-for="ship in nonGroupedShips"
        v-bind:key="ship.type"
        v-bind:ship="ship"
        v-bind:techs="techs"
        v-bind:psheet="psheet"></ShipRow>
    <b-row>
      <b-col class="section-header"><strong>Grouped Ships</strong></b-col>
    </b-row>
    <ShipRow
        v-for="ship in availableShips"
        v-bind:key="ship.type"
        v-bind:ship="ship"
        v-bind:techs="techs"
        v-bind:psheet="psheet"></ShipRow>
    <template v-if="groundUnits.length > 0">
      <b-row>
        <b-col class="section-header"><strong>Ground Units</strong></b-col>
      </b-row>
      <ShipRow
          v-for="ship in groundUnits"
          v-bind:key="ship.type"
          v-bind:ship="ship"
          v-bind:techs="techs"
          v-bind:psheet="psheet"></ShipRow>
    </template>
  </b-container>
</template>

ShipRow.vue

<template >
  <div v-if="ship.grouped()" class="ship-group-div">
    <b-row class="ship-header-row">
      <b-col cols="5" class="ship-name">{{ ship.name }}</b-col>
      <b-col cols="3">
        <b-button block variant="primary" size="sm" v-on:click="purchaseShip(ship)" v-bind:disabled="disableBuy(ship)">New ({{ ship.cost }})</b-button>
      </b-col>
      <b-col cols="4"></b-col>
    </b-row>
    <div
        v-for="group in ship.groups()"
        v-bind:key="group.label">
      <b-row class="ship-group-row">
        <b-col cols="5" class="ship-name">
          <b-badge variant="danger" v-if="allowReact(group)">R</b-badge>
          <b-badge variant="warning" v-if="canReact(group)">R</b-badge>
          {{group.label}}
          <b-badge variant="primary">{{group.count}}</b-badge>
        </b-col>
        <b-col cols="3">
          <b-button block variant="primary" size="sm" v-on:click="purchaseShip(ship, group.label)" v-bind:disabled="disableBuy(ship, group.label)">Buy ({{ ship.cost }})</b-button>
        </b-col>
        <b-col cols="3">
          <b-button block variant="danger" size="sm" v-on:click="loseShip(ship, group.label)" v-bind:disabled="disableLose(ship, group.label)">Lose</b-button>
        </b-col>
        <b-col cols="1">
          <b-dropdown class="split-merge" right dropup boundary="scrollParent" size="sm" menu-class="split-merge-menu">
            <b-dropdown-header>{{group.label}}</b-dropdown-header>
            <b-dropdown-text v-if="hasNoCommands(ship, group)">Cannot split or merge</b-dropdown-item>
            <template v-if="ship.hasAvailableGroup()">
              <b-dropdown-item-button
                  v-for="i in group.count-1"
                  v-bind:key="splitKey(group, i)"
                  v-on:click="splitGroup(ship, group, i)"
                  >
                Split out {{ i }}
              </b-dropdown-item-button>
            </template>
            <b-dropdown-divider v-if="canSplitAndMerge(ship, group)"></b-dropdown-divider>
            <b-dropdown-item-button
                v-for="otherGroup in ship.mergableGroups(group)"
                v-bind:key="mergeKey(group, otherGroup)"
                v-on:click="mergeGroups(ship, group, otherGroup)">
              Merge into {{ otherGroup.label }}
            </b-dropdown-item-button>
          </b-dropdown>
        </b-col>
      </b-row>
      <b-row class="ship-group-tech-row">
        <b-col cols="8" class="ship-group-tech">{{ group.techString() }}</b-col>
        <b-col cols="4">
          <b-button
              variant="primary" 
              size="sm"
              v-if="ship.upgradable() && !ship.autoUpgrade"
              v-on:click="upgradeGroup(ship, group.label)"
              v-bind:disabled="disableUpgrade(ship, group.label)">
            Upgrade ({{ ship.upgradeCost(group.label) }})
          </b-button>
        </b-col>
      </b-row>
    </div>
  </div>
  <b-row v-else align-v="center" align-h="center">
    <b-col cols="5" class="ship-name">{{ ship.name }} <b-badge :variant="shipBadgeVariant(ship)">{{ ship.currentCount }}</b-badge></b-col>
    <b-col cols="3">
      <b-button block variant="primary" size="sm" v-on:click="purchaseShip(ship)" v-bind:disabled="disableBuy(ship)">Buy ({{ ship.cost }})</b-button>
    </b-col>
    <b-col cols="3">
      <b-button block variant="danger" size="sm" v-on:click="loseShip(ship)" v-bind:disabled="disableLose(ship)">Lose</b-button>
    </b-col>
    <b-col cols="1"></b-col>
  </b-row>
</template>

下拉菜单本身在 ShipRow.vue 中。菜单的内容可以根据应用中执行的其他操作动态更改（并且在呈现时内容更改看起来没问题，而不会跳转到页面顶部）。

我已经尝试将 boundary 设置为 window 和 viewport，但这似乎没有帮助。当下拉菜单打开时，我是否遗漏了什么导致滚动冻结（可能与它被嵌入到选项卡或其他东西中有关）？

提前感谢您的任何见解。我希望这是我忽略的小东西。我很高兴提供一个指向“实时”网站的链接供人们查看，但不确定这是否符合 kosher（这只是一个爱好项目，没有商业用途）。

Bootstrap Vue b-dropdown 导致移动设备上的页面滚动问题

0 个答案: