在 Nuxt中 使用 vue-seamless-scroll

之前在其他项目中用过一个无缝滚动的组件 vue-seamless-scroll 感觉还可以，然后打算在 Nuxt 项目中继续使用，但是该组件的作者表示暂不支持 Nuxt ，但实际上我们可以通过添加 <client-only> 标签来解决这个问题，组件的演示地址。

一、安装 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 错误。

重启服务后，发现效果跟预期的不一样，或者控制台报错：

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警告]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在其中嵌套块级元素或丢失。Bailing水化和执行完整的客户端渲染。

三、解决方案

在 vue-seamless-scroll 外层添加 client-only 标签，告诉服务器仅在客户端渲染。

    <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>