vue和uniapp页面实现自动滚动到最底部

更新时间：2024年05月24日 09:51:20 作者：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);

完毕，组件引入什么的我就不上代码了，太简单了直接省略

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 事件的$event参数=事件的值案例
这篇文章主要介绍了Vue 事件的$event参数=事件的值案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-01-01
Vue2.2.0+新特性整理及注意事项
本文是小编精心给大家收藏整理的关于Vue2.2.0+新特性,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
详解VUE Element-UI多级菜单动态渲染的组件
这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
实现vue图片缩放方式-拖拽组件
这篇文章主要介绍了实现vue图片缩放方式-拖拽组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue中的自定义指令
这篇文章主要介绍了Vue中的自定义指令的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-12-12
vue-cli中的图片资源存放位置详解
这篇文章主要介绍了vue-cli中的图片资源存放位置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue-cli3项目升级到vue-cli4 的方法总结
这篇文章主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
详解Vue+axios+Node+express实现文件上传(用户头像上传)
这篇文章主要介绍了详解Vue+axios+Node+express实现文件上传(用户头像上传)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue 动态生成数据字段的实例
这篇文章主要介绍了Vue 动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue 不使用select实现下拉框功能(推荐)
这篇文章主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用，需要的朋友可以参考下
2018-05-05