問題

• 如何做到整個(gè)頁面不跟著一起滾動(dòng)
• 這里最主要的問題可能是評(píng)論的內(nèi)容如何合理的展示出來

解決

• 針對(duì)第一問題其實(shí)比較簡(jiǎn)單只需要在頁面的根元素上利用100vh的視窗，然后通過flex的hidden布局，讓超過視窗的內(nèi)容都隱藏起來，這樣就可以解決了，我下面展示下代碼，我使用tailwindcss來完成的

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

• 第二個(gè)問題相對(duì)來說比較復(fù)雜，我這里碰到了一個(gè)坑，那就是評(píng)論區(qū)的內(nèi)容要不就是不能完全展示出來，要不就是按照剩余視窗的內(nèi)容展示出來，這樣就會(huì)造成明明評(píng)論就10個(gè)字，但是需要占用整整1/3的屏幕，期間嘗試了很多方法，最后自己摸索出一個(gè)靠譜方法，跟大家分享下
  • 首先你想要評(píng)論區(qū)的內(nèi)容都展示出來，那肯定要打破父元素設(shè)定的 h-screen overflow-hidden 規(guī)則，方法就是用h-screen/h-full+overflow-auto 的方式，代碼如下

<van-tab title="互動(dòng)" class=" h-screen overflow-auto">
</van-tab>

• 如果只是做了上面一個(gè)步驟，你會(huì)發(fā)現(xiàn)評(píng)論區(qū)一共十條消息，它只會(huì)給你展示4或是5條
• 這個(gè)時(shí)候可能有人會(huì)在每個(gè)for循環(huán)的元素上加入 h-screen overflow-auto ，這個(gè)確實(shí)能把10條都展示出來，但是每條評(píng)論會(huì)占用很大的空間，這個(gè)是沒有辦法的，至少我是沒有找到辦法，哈哈！??！
• 這里就直接來到解決方案，那就是for循環(huán)里的不用管它，大小就按照內(nèi)容來定，然后再for循環(huán)的最后，另外加一個(gè)元素，這個(gè)元素是要固定大小的，這樣就可以把之前不能展示的元素給撐起來，代碼如下

          <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="http://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="簡(jiǎn)介">
          感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974感覺可以的話點(diǎn)個(gè)贊：feifei4974
        </van-tab>
        <van-tab title="互動(dòng)" 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="嘿??！快來互動(dòng)起來，別愣著??！" class="flex-1 mr-2"/>
      <NButton type="primary" :loading="searchLoading" @click.stop="searchBtn">
        提交
      </NButton>
    </div>
  </div>
</template>