欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue和uniapp頁面實現(xiàn)自動滾動到最底部

 更新時間：2024年05月24日 09:51:20   作者：haosicx  
這篇文章主要介紹了vue和uniapp頁面實現(xiàn)自動滾動到最底部方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue和uniapp頁面自動滾動到最底部

vue項目中自動滾動到最底部

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

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

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

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當(dāng)前頁面的高度

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,    //滾動到頁面的目標(biāo)位置（單位px）
              duration: 0    //滾動動畫的時長，默認(rèn)300ms，單位 ms
          });

vue或者uniapp阻止頁面滾動

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

話不多說上代碼

// 阻止頁面滾動

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)文章

最新評論