元素定位：评论区内容要求完整展示，页面头，评论内容，页面底部，这三部分如何写

问题

如何做到整个页面不跟着一起滚动
这里最主要的问题可能是评论的内容如何合理的展示出来

解决

针对第一问题其实比较简单只需要在页面的根元素上利用100vh的视窗，然后通过flex的hidden布局，让超过视窗的内容都隐藏起来，这样就可以解决了，我下面展示下代码，我使用tailwindcss来完成的

<div class="bg-gray-100 h-screen overflow-hidden">
</div>

第二个问题相对来说比较复杂，我这里碰到了一个坑，那就是评论区的内容要不就是不能完全展示出来，要不就是按照剩余视窗的内容展示出来，这样就会造成明明评论就10个字，但是需要占用整整1/3的屏幕，期间尝试了很多方法，最后自己摸索出一个靠谱方法，跟大家分享下
- 首先你想要评论区的内容都展示出来，那肯定要打破父元素设定的 h-screen overflow-hidden 规则，方法就是用h-screen/h-full+overflow-auto 的方式，代码如下

<van-tab title="互动" class=" h-screen overflow-auto">
</van-tab>

如果只是做了上面一个步骤，你会发现评论区一共十条消息，它只会给你展示4或是5条
这个时候可能有人会在每个for循环的元素上加入 h-screen overflow-auto ，这个确实能把10条都展示出来，但是每条评论会占用很大的空间，这个是没有办法的，至少我是没有找到办法，哈哈！！！
这里就直接来到解决方案，那就是for循环里的不用管它，大小就按照内容来定，然后再for循环的最后，另外加一个元素，这个元素是要固定大小的，这样就可以把之前不能展示的元素给撑起来，代码如下

          <div class="flex justify-center my-6  h-[500px] overflow-auto">
            <NButton :disabled="comments.length === 0" :loading="loadDataLoading"
                     type="primary" @click.stop="reqLoadBtn(pages.pageNum + 1, undefined)"
            >
              加载更多
            </NButton>
          </div>

最后给各位铁子展示下最终的代码

<template>
  <div class="bg-gray-100 h-screen overflow-hidden">
    <HeaderComponent/>
    <iframe class="w-full h-64" src="//player.bilibili.com/player.html?isOutside=true&aid=1904685682&bvid=BV1ZU411f7fT&cid=1549157077&p=1"></iframe>
    <div class="flex items-center justify-between p-4">
      <div class="flex items-center">
        <Icon size="20">
          <Star28Filled v-if="true"/>
          <Star28Regular v-else/>
        </Icon>
        <span class="ml-2">收藏</span>
      </div>
      <div class="flex items-center">
        <Icon size="20">
          <Accessibility28Regular/>
        </Icon>
        <span class="ml-2">26565</span>
      </div>
    </div>
    <div class="flex-1 overflow-hidden">
      <van-tabs v-model:active="active" class="h-full">
        <van-tab class="text-[16px] font-bold pl-2 pr-2" title="简介">
          感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974感觉可以的话点个赞：feifei4974
        </van-tab>
        <van-tab title="互动" class=" h-screen overflow-auto">
            <div v-for="(comment, index) in comments" :key="index" class="p-2 border-b border-gray-200 flex">
              <img src="@/assets/img/img.png" alt="用户头像" class="w-10 h-10 rounded-full mr-2" />
              <div>
                <p class="font-bold mb-1 ">{{ comment.username }}</p>
                <p class="text-gray-600 ">{{ comment.content }}</p>
              </div>
            </div>
          <div class="flex justify-center my-6  h-[500px] overflow-auto">
            <NButton :disabled="comments.length === 0" :loading="loadDataLoading"
                     type="primary" @click.stop="reqLoadBtn(pages.pageNum + 1, undefined)"
            >
              加载更多
            </NButton>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-if="active === 1" class="fixed bottom-0 left-0 right-0 flex items-center p-4 bg-white z-50 border-t border-gray-300">
      <NInput v-model:value="roleName" type="text" placeholder="嘿！！快来互动起来，别愣着啊！" class="flex-1 mr-2"/>
      <NButton type="primary" :loading="searchLoading" @click.stop="searchBtn">
        提交
      </NButton>
    </div>
  </div>
</template>

最后编辑于：2024.06.08 22:08:07