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);完毕，组件引入什么的我就不上代码了，太简单了直接省略
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2项目中如何使用clipboard复制插件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
公共Hooks封装报表导出useExportExcel实现详解
这篇文章主要为大家介绍了公共Hooks封装报表导出useExportExcel实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了Vue中v-html图片过大导致溢出的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue-resource 拦截器（interceptor）的使用详解
本篇文章主要介绍了vue-resource 拦截器（interceptor）的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue混入mixins滚动触底的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vant的Uploader 文件上传,图片数据回显问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
a vue component，基于vue的表格组件，主要解决大数据量的表格渲染性能问题，使用canvas绘制表格，同时支持类似excel的批量选中，复制黏贴删除，实时编辑等功能.这篇文章主要介绍了基于vue+canvas的excel-like组件,需要的朋友可以参考下2017-11-11
最新评论