Vuetify的可滚动卡片内容

如何解决Vuetify的可滚动卡片内容

您好，我正在尝试使用flex util类和Vuetify的组件在卡中创建可滚动内容，但未成功。他是我尝试过的最后一个代码版本：

https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark

这是我的期望：

我找到了一些具有纯柔韧性的样品，但是用Vuetify无法做到吗？您能帮我编辑codeandbox使其正常工作吗？谢谢。

解决方法

这个问题与CSS的关系比Vuetify多得多，所以让我向您解释如何解决它。假设您的标记在html下面的浏览器中呈现，样式为v-card__text或添加自定义类my-list，如果您使用v-card__text进行样式设置，请确保添加范围限制为组件中的style标签，否则将影响整个项目。

<div class="v-card v-sheet theme--light">
  <div class="v-card__title">You Title goes here</div>
  <div class="v-card__text my-list">
    <ul>
      <li>Text</li>
      ...
    </ul>
  </div>
</div>

<style scoped>
  .my-list {
    // For eg. here 200px is MainNavBar + TitleBar and some padding/margins
    // keep on increasing height if you have more items placed above the v-card
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
</style>

,

使用 Vuetify 中内置的component = v-virtual-scroll是一种解决方案。

例如：

        <v-card class="flex-grow-0">
          <v-virtual-scroll
            :items="Array.from({length: 100}).map((_,index) => index)"
            :item-height="50"
            height="300"
          >
            <template v-slot="{ item }">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Item {{ item }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-virtual-scroll>
        </v-card>

Updated CodeSandBox

,

您可以将高度设置为# imports import tensorflow as tf import pandas as pd import numpy as np # genration of dummy data x1 = np.random.randint(100,size =(5,5,5),dtype = np.int16) x2 = np.random.randint(100,4,4),dtype = np.int16) y1 = np.random.randint(2,),dtype = np.int16) y2 = np.random.randint(2,dtype = np.int16) # creation of model def create_model3(): input1 = tf.keras.Input(shape=(5,name = 'I1') input2 = tf.keras.Input(shape=(4,name = 'I2') hidden1 = tf.keras.layers.LSTM(units = 4)(input1) hidden2 = tf.keras.layers.LSTM(units = 4)(input2) merge = tf.keras.layers.concatenate([hidden1,hidden2]) hidden3 = tf.keras.layers.Dense(units = 3,activation='relu')(merge) output1 = tf.keras.layers.Dense(units = 2,activation='softmax',name ='O1')(hidden3) output2 = tf.keras.layers.Dense(units = 2,name = 'O2')(hidden3) model = tf.keras.models.Model(inputs = [input1,input2],outputs = [output1,output2]) model.compile(optimizer='adam',loss='sparse_categorical_crossentropy',metrics=['accuracy']) return model model = create_model3() tf.keras.utils.plot_model(model,'my_first_model.png',show_shapes=True) # training the model history = model.fit( x = {'I1':x1,'I2':x2},y = {'O1':y1,'O2': y2},batch_size = 32,epochs = 10,verbose = 1,callbacks = None,# validation_data = [(val_data,new_val_data),(val_labels,new_val_labels)] ) ，然后使用v-list滚动它

overflow-y: scroll;

我已经编辑了您的代码，这是codesandbox上的一个有效示例。

这是基于草图的所需输出的样本。