vue全局api --- nextTick

标签：修改   ted   dom   margin   indexof   var   index   tick   class   

nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

在项目中遇到做横向滚动，并且通过首页传进来的值找到是通过哪一条进来的，并且将那一条展示在手机屏幕的可视区域，

css代码如下

   .detail-parent {
        width: 100%;
        height: 150px;
        overflow-x: scroll;
    }

通过上一级页面传进来的值去请求接口之后，找到当前定位的那一条之后，改变元素的scrollLeft就可以在将那条数据放到手机的可视区域

js

this.lectureList = res.data.data.lecture_list;
var classContent = this.lectureList.filter((item, index) => {
       eturn item.lecture_id === this.class_id;
});
this.currentIndex = this.lectureList.indexOf(classContent[0]);

要使用this.currentIndex的值，平常都是直接在mounted中直接通过ref获取到想要操作的元素，现在虽然可以在mounted中可以获取到元素，但是并不能获取到她的scrollLeft；
第一种办法可以直接在updated钩子函数中获取元素修改但是有一个问题就是每次数据改变都会执行

updated() {
            this.$nextTick(() => {
                var li = document.querySelector('.select');    //选中的元素
                this.$refs.parent.scrollLeft = li.offsetWidth * this.currentIndex + 15 * this.currentIndex; //选中的元素距离左边的距离*它的下标+每一个元素的margin_left*下标
            });
        },

第二种是在请求完数据之后使用nextTick方法

this.lectureList = res.data.data.lecture_list;
var classContent = this.lectureList.filter((item, index) => {
       eturn item.lecture_id === this.class_id;
});
this.currentIndex = this.lectureList.indexOf(classContent[0]);
this.$nextTick(() => {
    var li = document.querySelector('.select');
    this.$refs.parent.scrollLeft = li.offsetWidth * this.currentIndex + 15 * this.currentIndex;
});

vue全局api --- nextTick

标签：修改   ted   dom   margin   indexof   var   index   tick   class   

原文地址：https://www.cnblogs.com/douge/p/12091573.html