vue和uniapp页面实现自动滚动到最底部
作者：haosicx
这篇文章主要介绍了vue和uniapp页面实现自动滚动到最底部方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue和uniapp页面自动滚动到最底部
vue项目中自动滚动到最底部
首先可以通过这个方法 获取到当前滚动的元素是哪一个
这个方法定义script标签里 export default外面
然后滚动的时候可以在控制台中打印出当前滚动的什么元素
function findScroller(element) {
element.onscroll = function() { console.log(element)}
Array.from(element.children).forEach(findScroller);
}
findScroller(document.body); 然后找到这个元素 添加ref='list'
这个时候就有两种方法
1.第一种就是给这个元素的scrollTop元素距离页面顶部的距离设置一个超大的值 这样每次输入对话 就会自动滚动到最底部了 但是这个方法不是很建议
2.第二个方法就是给scrollTop设置scrollHeight当前页面的高度
this.$nextTick(() => { // 一定要用nextTick
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
})uniapp中滚动到最底部
在uniapp中 使用ref会得到undefined 不可以用ref获取dom
推荐使用这个方法
首先给最外面的盒子加一个高度
.wrapper{
height:auto!important;
}然后使用内置的api
this.$nextTick(()=>{
uni.pageScrollTo({
scrollTop: 2000000, //滚动到页面的目标位置（单位px）
duration: 0 //滚动动画的时长，默认300ms，单位 ms
});vue或者uniapp阻止页面滚动
最近uniapp有个需求，页面底部增加悬浮窗，代码上完之后允许上下拖拽，写完之后发现当页面超出屏幕长度的时候拖拽就瞎跑，悬浮窗上下移动页面也跟着移动，思考了下，在滚动触发的时候把当前页面的滚动条锁死，当拖拽离开屏幕的时候再还原，完美解决
话不多说上代码
// 阻止页面滚动
var box=function(e){passive: false ;};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",box,false);// 允许页面滚动
var box=function(e){passive: false };
document.body.style.overflow=''; // 出现滚动条
document.removeEventListener("touchmove",box,false);完毕，组件引入什么的我就不上代码了，太简单了直接省略
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。