vue和uniapp頁面實現(xiàn)自動滾動到最底部
更新時間：2024年05月24日 09:51:20 作者：haosicx
這篇文章主要介紹了vue和uniapp頁面實現(xiàn)自動滾動到最底部方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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元素距離頁面頂部的距離設(shè)置一個超大的值 這樣每次輸入對話 就會自動滾動到最底部了 但是這個方法不是很建議
2.第二個方法就是給scrollTop設(shè)置scrollHeight當前頁面的高度
this.$nextTick(() => { // 一定要用nextTick
this.$refs.list.scrollTop = this.$refs.list.scrollHeight
})uniapp中滾動到最底部
在uniapp中 使用ref會得到undefined 不可以用ref獲取dom
推薦使用這個方法
首先給最外面的盒子加一個高度
.wrapper{
height:auto!important;
}然后使用內(nèi)置的api
this.$nextTick(()=>{
uni.pageScrollTo({
scrollTop: 2000000, //滾動到頁面的目標位置（單位px）
duration: 0 //滾動動畫的時長，默認300ms，單位 ms
});vue或者uniapp阻止頁面滾動
最近uniapp有個需求，頁面底部增加懸浮窗，代碼上完之后允許上下拖拽，寫完之后發(fā)現(xiàn)當頁面超出屏幕長度的時候拖拽就瞎跑，懸浮窗上下移動頁面也跟著移動，思考了下，在滾動觸發(fā)的時候把當前頁面的滾動條鎖死，當拖拽離開屏幕的時候再還原，完美解決
話不多說上代碼
// 阻止頁面滾動
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=''; // 出現(xiàn)滾動條
document.removeEventListener("touchmove",box,false);完畢，組件引入什么的我就不上代碼了，太簡單了直接省略
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2項目中如何使用clipboard復(fù)制插件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
公共Hooks封裝報表導(dǎo)出useExportExcel實現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報表導(dǎo)出useExportExcel實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue中v-html圖片過大導(dǎo)致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue混入mixins滾動觸底的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
a vue component，基于vue的表格組件，主要解決大數(shù)據(jù)量的表格渲染性能問題，使用canvas繪制表格，同時支持類似excel的批量選中，復(fù)制黏貼刪除，實時編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下2017-11-11