Question

我正在用vuetify构建轮播，并遇到奇怪的调整大小错误。当窗口滚动时，很多时候窗口部分会向下扩展，然后迅速缩小到合适的大小。我似乎无法弄清楚为什么会这样。有时在我手动单击窗口时发生，有时却没有。我将附上我的代码。

还附有该部分的屏幕截图。如果我们很快将其托管，我也将包括在内。含糊的问题，但希望有人发生过这种情况。

    <v-layout class='py-3' style='background-color: #01194D' column id='testimonialSection'>
  <v-flex>
    <h2 class='display-1 font-weight-light text-xs-center mb-3'>Testimonials</h2>
    <v-layout column align-center>
      <!-- Window content -->
      <v-flex>
        <v-window v-model='testimonialWindow'>
          <v-window-item
            v-for='(testimonial, i) in testimonials'
            :key='i'
          >
            <v-card class='primary white--text' flat>
              <v-layout row wrap align-center justify-space-around>
                <!-- Quote -->
                <v-flex xs12 md5>
                  <v-card-text class='px-4 text-xs-center'>
                    <div class='subheading font-weight-light'>
                      "{{ testimonial.quote }}"
                    </div>
                    <h4 class='title font-weight-light mt-3'>{{ testimonial.name }} - <i>{{ testimonial.role }}</i></h4>
                  </v-card-text>
                </v-flex>
                <!-- Image -->
                <v-flex xs12 md7>
                  <v-responsive>
                    <img class='testimonialImage' :src='testimonial.img'>
                  </v-responsive>
                </v-flex>
              </v-layout>
            </v-card>
          </v-window-item>
        </v-window>
      <!-- Buttons -->
      </v-flex>
      <v-flex>
        <v-layout justify-space-between>
          <v-flex>
            <v-btn color='white' flat icon @click='scrollTestimonial(-1, true)'>
              <v-icon large>arrow_left</v-icon>
            </v-btn>
          </v-flex>
          <v-flex>
            <v-item-group
              v-model='testimonialWindow'
              class='text-xs-center'
              mandatory
            >
              <v-item
                v-for='i in testimonials.length'
                :key='i'
              >
                <v-btn
                  slot-scope='{ active, toggle }'
                  :input-value='active'
                  icon
                  @click='toggle'
                  class='white--text'
                >
                  <v-icon color='white' @click='scrollTestimonial(0, true)'>lens</v-icon>
                </v-btn>
              </v-item>
            </v-item-group>
          </v-flex>
          <v-flex>
            <v-btn color='white' flat icon @click='scrollTestimonial(1, true)'>
              <v-icon large>arrow_right</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>

Vuetify窗口组件在过渡时会随机调整大小/扩展

0 个答案: