vue如何實現(xiàn)類似Jquery的導(dǎo)航scrollerto功能

所有以前的jquery可以實現(xiàn)的功能用vue可以用更有效簡單的方法實現(xiàn)。原理都是一樣的。
正好前幾天我寫一個公司網(wǎng)站用到了導(dǎo)航，下面是我寫的代碼，代碼量很少。

//導(dǎo)航平滑滾動
export default {
        name: 'Main',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        components: {
            "top": Top,
            "official": Official,
            "wechat": Wechat,
            "payment": Payment,
            "category": Category,
            "mall": Mall,
            "cater": Cater,
            "wechat-pay": WechatPay,
            "little": Little,
            "crm": Crm,
            "adv": Adv,
            "contact": Contact,
            "my-footer": MyFooter,
            "loading": Loading
        },
        computed: {
            // 計算屬性的 getter
            heightNum: function () {
                return 1;
            },
            position: function () {
                let position = this.$store.getters.getPosition;
                console.log(position);
                let height = this.$refs[position].offsetTop;
                let scrollTopValue = this.$refs[position].scrollTop;
                this.$store.commit('changeHeight', height);
                this.$store.commit('changeScroll', scrollTopValue);
                return position;
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                // Code that will run only after the
                // entire view has been rendered
                window.addEventListener('scroll', this.changeActive);
                this.getOffsetTop();
                this.getScrollTop();
            })
        },
        methods: {
            greet: function (event) {
                // `this` 在方法里指向當(dāng)前 Vue 實例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            },
            scrollTo: function (data) {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                let des = this.$refs[data].offsetTop;
                let start = this.$refs[data].scrollTop;
                this.moveSlowly(des, start);
            },
            moveSlowly: function (des, start, time) {
                clearInterval(timer);
                let speedTime = time || 100;
                start || (start = 0);
                let distance = des - start;
                let speed = distance / speedTime;
                let i = 1;
                let pos = start;
                let timer = setInterval(function () {
                    if (i == speedTime) {
                        pos = des;
                        document.documentElement.scrollTop = document.body.scrollTop = pos;
                        clearInterval(timer);
                    } else {
                        pos = pos + speed;
                        document.documentElement.scrollTop = document.body.scrollTop = pos;
                        i++;
                    }
                }, 1)
            },
            changeActive: function () {
                let top = this.$refs.top.offsetTop;
                let wechat = this.$refs.wechat.offsetTop;
                let category = this.$refs.category.offsetTop;
                let contact = this.$refs.contact.offsetTop;
                let scrollY = this.scrollY();
                this.remove_active();
                (scrollY > 0 && scrollY < 500) && (this.$refs.navTop.className = 'active');
                (scrollY > wechat && scrollY < (category)) && (this.$refs.navWechat.className = 'active');
                (scrollY > category && scrollY < (contact)) && (this.$refs.navCategory.className = 'active');
                (scrollY > contact && scrollY < (contact + 500)) && (this.$refs.navContact.className = 'active');
            },
            remove_active: function () {
                this.$refs.navTop.className = '';
                this.$refs.navWechat.className = '';
                this.$refs.navCategory.className = '';
                this.$refs.navContact.className = '';
            },
            // 滾動條高
            scrollY: function () {
                return document.documentElement.scrollTop || document.body.scrollTop;
            },
            getOffsetTop: function () {
                let service = this.$refs.service.offsetTop;
                let offsetTop = new Object();
                offsetTop.mall = this.$refs.mall.offsetTop + service;
                offsetTop.cater = this.$refs.cater.offsetTop + service;
                offsetTop.wechatpay = this.$refs.wechatpay.offsetTop + service;
                offsetTop.little = this.$refs.little.offsetTop + service;
                offsetTop.crm = this.$refs.crm.offsetTop + service;
                offsetTop.adv = this.$refs.adv.offsetTop + service;
                this.$store.commit('changeOffsetTop', offsetTop);
            },
            getScrollTop: function () {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                let scrollTopLen = new Object();
                scrollTopLen.mall = this.$refs.mall.scrollTop;
                scrollTopLen.cater = this.$refs.cater.scrollTop;
                scrollTopLen.wechatpay = this.$refs.wechatpay.scrollTop;
                scrollTopLen.little = this.$refs.little.scrollTop;
                scrollTopLen.crm = this.$refs.crm.scrollTop;
                scrollTopLen.adv = this.$refs.adv.scrollTop;
                this.$store.commit('changeScrollTop', scrollTopLen);
            }
        }
    }
</script>

找到 一個好用的插件：

yarn add vue-scrollto

有，基于vue微信UI的YDUI中，有個scrolltab組件