Vue controls the scroll bar to slide to a certain position

1. Introduction to various high-level calculations about web development

Set the current sliding distance

Syntax 1: window.scrollTop(x,y) passes two values
​​//x abscissa y ordinate

Example: window.scrollTop(0, 1000)

Syntax 2: window.scrollTop(options) passes the object and puts the attributes in the object

  window.scrollTo({
           top:560,
          left:0,
          behavior: "smooth"
        });

// top: vertical coordinate left: abscissa

behavior type String, represents scrolling behavior, supports parameters smooth (smooth scrolling), instant (instant scrolling), the default value is auto, the measured effect is equivalent to instant

    // 获取html元素
    let htmlDom = document.documentElement;
    // 获取页面高度加内边距
    const deviceHeight = htmlDom.clientHeight;
    //获取当前滚动条的高度
    const scrollHeight=htmlDom.scrollHeight；
    //获取页面高度加内边距加边框
    const offsetHeight=htmlDom.offsetHeight;
    console.log("html--------",htmlDom.offsetHeight);
    console.log("deviceHeight",deviceHeight);
    console.log("scrollHeight",htmlDom.scrollHeight);
    //我的业务里面只用到了这个scrollHeight
    let keepHeight=htmlDom.scrollHeight-90;
    // 如果需要设置某个元素的样式等用ref进行一个绑定 这个例子ref绑定的就是list
    // this.$refs.list.style.height = htmlDom.scrollHeight +"px"
    window.scrollTo({
      top: keepHeight,
      behavior: 'instant'
    })

Equipped with an official picture to understand:

2. Return to the top of the page to implement the method

 1. Bind ref in the element 

 <div ref="returnTop"></div>

  Add this code where you need to go back to the top

   this.$nextTick(() => {
        this.$refs.returnTop.scrollTop = 0
      })

2. The browser returns to the top of the page window.scrollTo(0,0), and the page scrolls

No need for further introduction, it’s all there.

A small example is as follows:

window.scrollTo( 0, 100 );
 
// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

3. Use el-pagination to turn pages and automatically return to the top

Define the $scrollTo method and mount it globally in vue

// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
    window.scrollTo({
        top: x,
        left: y,
        behavior: type // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant
    })
}
// 使用方法
this.$scrollTo()

3. Summarize the new knowledge learned today

(1) watch monitoring attribute change function

   Two ways to write listening attributes:

isHot:{
	// immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
    //deep:true, //开启深度监视，当属性是个对象时，如需监听对象的属性，需开启深度监视
	  handler(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue)
	}
},

//简写
/* isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
} */

The watch listening function implements the same function as the compted function

			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
                   //监听函数可以实现异步方法
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}

 (2) The difference between computed and watch:

1.Watch can complete all the functions that computed can complete.

2. The functions that watch can complete may not be completed by computed. For example, watch can perform asynchronous operations.

But when computed calculates certain values, one less attribute can be written. For example: fullName