使用VueScrollTo实现网页平滑滚动效果

VueScrollTo是一个基于Vue的平滑滚动插件，实现网页中元素点击后平滑滚动到目标位置的效果。在很多情况下，我们需要在网页中使用锚点链接，但是默认的锚点跳转方式可能会出现跳动或者瞬间跳转的情况，使用VueScrollTo可以避免这些问题。接下来将从以下几个方面详细介绍VueScrollTo的使用方法。

一、安装VueScrollTo

可以使用npm来安装VueScrollTo，命令如下：

npm install --save vue-scrollto

安装完成后，在Vue项目中使用VueScrollTo需要在main.js中导入组件：

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

二、VueScrollTo的基本用法

安装完成后，我们就可以开始使用VueScrollTo实现平滑滚动效果。VueScrollTo有两种用法:全局组件和局部组件。全局组件在任何组件中都可以使用，定义方式如下：

<template>
<vue-scrollto offset="0" duration="500">...</vue-scrollto>
</template>

其中，offset是指滚动目标位置在窗口顶部的偏移量，duration是指滚动的持续时间。局部组件仅在定义的组件中可以使用，定义方式如下：

import {VueScrollTo, Vuelidate} from 'vue-scrollto'export default {components: {VueScrollTo},methods: { scrollToTop () { this.$refs.foo.scrollTo('#top')}}}

在template中使用局部组件:

<template>
<div>
<vue-scrollto ref="foo"></vue-scrollto>
</div>

这里的ref是指定了该组件中的名称，同时必须指定一个ID为top的锚点，才能实现滚动到顶部的效果。

三、VueScrollTo高级用法

VueScrollTo还提供了其他高级用法，例如在动画结束时执行回调函数：

<template>
<vue-scrollto @done="log">...</vue-scrollto>
</template>

其中，@done是指定了动画结束时调用的函数。另外，VueScrollTo还提供了在滚动完成后执行指定的JavaScript语句的功能：

<template>
<vue-scrollto v-scroll-to="{ el: '#foo', onDone: 'logScrollEvent' }">...</vue-scrollto>
</template>

其中，v-scroll-to是指定了触发滚动的事件，el是指定了滚动的目标元素，onDone是指定了滚动完成后执行的JavaScript语句。

app 使用 uniapp scroll-view标签

1）使用 uni.pageScrollTo 方法，属于页面级别滚动。
2）使用 scroll-view 标签的属性：scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string); 属于区域级别滚动。

uni.pageScrollTo 方法

将页面滚动到目标位置。

uni.pageScrollTo({scrollTop: 0,duration: 0,
})

如果传入 scrollTop 不起效，应该是布局的问题，它是页面级的滚动：所有的滚动单元必须是在根元素下，由滚动单元直接撑起来的高度，就可以滚动到指定位置。

//获取元素离页面顶部的距离getElementScollTop() {const query = uni.createSelectorQuery()query.select('.index-con').boundingClientRect((data) => {console.log(data, 'data')let pageScrollTop = Math.round(data.top)uni.pageScrollTo({scrollTop: pageScrollTop, //滚动的距离duration: 0, //过渡时间})}).exec()},

uni.pageScrollTo官方文档
uni.createSelectorQuery()官方文档

使用这个没发现啥问题，直接随时修改 scrollTop 的值就可以滚动，在需要使用 scroll-view 的地方直接用。

scroll-view官方文档