vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部

更新時(shí)間：2024年05月24日 09:51:20 作者：haosicx

這篇文章主要介紹了vue和uniapp頁面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue和uniapp頁面自動(dòng)滾動(dòng)到最底部

vue項(xiàng)目中自動(dòng)滾動(dòng)到最底部

首先可以通過這個(gè)方法獲取到當(dāng)前滾動(dòng)的元素是哪一個(gè)

這個(gè)方法定義script標(biāo)簽里 export default外面

然后滾動(dòng)的時(shí)候可以在控制臺(tái)中打印出當(dāng)前滾動(dòng)的什么元素

function findScroller(element) {
    element.onscroll = function() { console.log(element)} 

    Array.from(element.children).forEach(findScroller);
}

findScroller(document.body);

然后找到這個(gè)元素添加ref='list'

這個(gè)時(shí)候就有兩種方法

1.第一種就是給這個(gè)元素的scrollTop元素距離頁面頂部的距離設(shè)置一個(gè)超大的值這樣每次輸入對話就會(huì)自動(dòng)滾動(dòng)到最底部了但是這個(gè)方法不是很建議

2.第二個(gè)方法就是給scrollTop設(shè)置scrollHeight當(dāng)前頁面的高度

this.$nextTick(() => {  // 一定要用nextTick
  this.$refs.list.scrollTop = this.$refs.list.scrollHeight
})

uniapp中滾動(dòng)到最底部

在uniapp中使用ref會(huì)得到undefined 不可以用ref獲取dom

推薦使用這個(gè)方法

首先給最外面的盒子加一個(gè)高度

.wrapper{
       height:auto!important;
   }

然后使用內(nèi)置的api

 this.$nextTick(()=>{
          uni.pageScrollTo({
              scrollTop: 2000000,    //滾動(dòng)到頁面的目標(biāo)位置（單位px）
              duration: 0    //滾動(dòng)動(dòng)畫的時(shí)長，默認(rèn)300ms，單位 ms
          });

vue或者uniapp阻止頁面滾動(dòng)

最近uniapp有個(gè)需求，頁面底部增加懸浮窗，代碼上完之后允許上下拖拽，寫完之后發(fā)現(xiàn)當(dāng)頁面超出屏幕長度的時(shí)候拖拽就瞎跑，懸浮窗上下移動(dòng)頁面也跟著移動(dòng)，思考了下，在滾動(dòng)觸發(fā)的時(shí)候把當(dāng)前頁面的滾動(dòng)條鎖死，當(dāng)拖拽離開屏幕的時(shí)候再還原，完美解決

話不多說上代碼

// 阻止頁面滾動(dòng)

var box=function(e){passive: false ;};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",box,false);

// 允許頁面滾動(dòng)

var box=function(e){passive: false };
document.body.style.overflow=''; // 出現(xiàn)滾動(dòng)條
document.removeEventListener("touchmove",box,false);

完畢，組件引入什么的我就不上代碼了，太簡單了直接省略