使用vue的better-scroll实现窗口内容,自动下拉到最底部

使用vue的better-scroll实现窗口内容,自动下拉到最底部

          • 使用scrollToElement()方法实现滚动

使用scrollToElement()方法实现滚动
<template>
	<div ref="container" style="overflow: hidden;">
	   <ul>
	  	 <li></li>
	   </ul>
	</div>
</template>

<script>
	import BScroll from "better-scroll";
	
	export default {
		mounted() {
		    this.$nextTick(() => {
			    this._initScroll();
			    let Lis = this.$refs.container.querySelectorAll("li"); // 查找所有li元素
			    this.scroll.scrollToElement( Lis[Lis.length - 1], 300 );  // 滑动到指定元素,设置动画300ms
		    });
		},
		updated() {
		   	this.$nextTick(() => {
				this._initScroll();
				let Lis = this.$refs.container.querySelectorAll("li"); // 查找所有li元素
				this.scroll.scrollToElement( Lis[Lis.length - 1], 300 );  // 滑动到指定元素,设置动画300ms
		   	});
		},
		methods:{
		    _initScroll() {
		    	// 此种写法防止内存泄漏
				if (!this.scroll) {
					// 如果不存在,创建新的BScroll实例
        			this.scroll = new BScroll(this.$refs.xiaomi, {
          				click: true
        			});
      			} else {
      				// 如果存在,直接刷新
        			this.scroll.refresh();
      			}
		    }
		}
	}
	
	// 如果是做的聊天框,会出现在输入框输入内容时,直接下拉到最底部
	// 解决方法:用watch去监听聊天记录是否发生变化,如果有变化才进行滑动
</script>
 

你可能感兴趣的:(vue)