之前在其他項目中用過一個無縫滾動的組件 vue-seamless-scroll 感覺還可以，然后打算在 Nuxt 項目中繼續(xù)使用，但是該組件的作者表示暫不支持 Nuxt ，但實際上我們可以通過添加 <client-only> 標(biāo)簽來解決這個問題，組件的演示地址。

一、安裝 vue-seamless-scroll

1. npm install vue-seamless-scroll --save

二、修改配置

在 plugins 目錄中新建 seamless-scroll.js 文件：

1. import Vue from 'vue';

2. import SeamlessScroll from 'vue-seamless-scroll';

3. Vue.use(SeamlessScroll);

修改 nuxt.config.js 配置：

  plugins: [
    { src: '@/plugins/vue-component', ssr: 'true' },
    { src: '@/plugins/vue-seamless-scroll', ssr: false }, // ssr: false
  ],

ssr: false 為 true 的話，會報 Windows is not defined 錯誤。

重啟服務(wù)后，發(fā)現(xiàn)效果跟預(yù)期的不一樣，或者控制臺報錯：

image

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

翻譯過來就是：

[Vue警告]：客戶端呈現(xiàn)的虛擬DOM樹與服務(wù)器呈現(xiàn)的內(nèi)容不匹配。這可能是由不正確的HTML標(biāo)記引起的，例如在其中嵌套塊級元素或丟失。Bailing水化和執(zhí)行完整的客戶端渲染。

三、解決方案

在 vue-seamless-scroll 外層添加 client-only 標(biāo)簽，告訴服務(wù)器僅在客戶端渲染。

    <client-only>
      <vue-seamless-scroll
        :data="newsList"
        :class-option="optionLeft"
        class="seamless-warp2"
      >
        <ul class="item">
          <li v-for="item in newsList" v-text="item.title"></li>
        </ul>
      </vue-seamless-scroll>
    </client-only>