Vue.js 2自动滚动到底部插件– vue-chat-scroll

Vue.js 2自动滚动到底部插件– vue-chat-scroll
插件名称 vue-chat-scroll
发布时间 2020年9月9日
插件作者 theomessin

Vue.js 2+的插件,在添加新内容时会自动滚动到元素的底部。

安装和下载:

# Yarn
$ yarn add vue-chat-scroll

# NPM
$ npm install vue-chat-scroll --save

用法

除了安装之外,您不需要在JavaScript中执行任何操作。要使用插件,只需使用v-chat-scroll指令。

<ul class="messages" v-chat-scroll>
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

防止用户向上滚动和向下滚动时向下滚动

另外,您可以将配置值传递给指令:

<ul class="messages" v-chat-scroll="{always: false, smooth: true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

平滑滚动以获取更新,但不是第一次看到容器

<ul class="messages" v-chat-scroll="{smooth: true, notSmoothOnInit: true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>

在聊天窗口中滚动显示消失的元素

如果您有一个“正在加载”动画,当您从外部来源收到消息时该动画消失了,请使用该scrollonremoved选项以确保在删除元素后进行滚动

<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true}">
  <li class="message" v-for="n in messages">{{ n }}</li>
  <li v-if="loading">•••</li>
</ul>

如果您想避免在这种情况下进行平滑滚动(因此在加载后立即滚动到底部),但是在收到新消息时将其保留,请使用smoothonremoved设置为false,同时可以将smooth设置true为以后的消息。

<ul class="messages" v-chat-scroll="{always: false, smooth: true, scrollonremoved:true, smoothonremoved: false}">
  <li class="message" v-for="n in messages">{{ n }}</li>
  <li v-if="loading">•••</li>
</ul>

仅当scrollonremoved设置为时,此选项才适用true。未定义时,行为默认为smooth属性。

使用配置道具禁用vue-chat-scroll

您可以使用enabledconfiguration属性进行控制v-chat-scroll

<ul class="messages" :v-chat-scroll="{enabled: enabled}">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>
data () => {
  enabled: false,
}

事记

v-chat-scroll-top-reached到达 滚动条的顶部时将触发。如果您正在使用此事件在列表前添加项目,则还要确保将config选项始终设置为false。

<ul class="messages" v-chat-scroll="{always: false}" @v-chat-scroll-top-reached="customMethod">
  <li class="message" v-for="n in messages">{{ n }}</li>
</ul>