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

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

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

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

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

首先可以通過(guò)這個(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元素距離頁(yè)面頂部的距離設(shè)置一個(gè)超大的值 這樣每次輸入對(duì)話(huà) 就會(huì)自動(dòng)滾動(dòng)到最底部了 但是這個(gè)方法不是很建議

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

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)到頁(yè)面的目標(biāo)位置(單位px)
              duration: 0    //滾動(dòng)動(dòng)畫(huà)的時(shí)長(zhǎng),默認(rèn)300ms,單位 ms
          });

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

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

話(huà)不多說(shuō)上代碼

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

var box=function(e){passive: false ;};
document.body.style.overflow='hidden';
document.addEventListener("touchmove",box,false);
// 允許頁(yè)面滾動(dòng)

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

完畢,組件引入什么的我就不上代碼了,太簡(jiǎn)單了直接省略

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論