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)文章
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04Vue SPA 初次進(jìn)入加載動畫實現(xiàn)代碼
今天小編就為大家分享一篇Vue SPA 初次進(jìn)入加載動畫實現(xiàn)代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置
本文主要介紹了vue監(jiān)聽頁面中的某個div的滾動事件并判斷滾動的位置,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue學(xué)習(xí)筆記五:在vue項目里面使用引入公共方法詳解
這篇文章主要介紹了在vue項目里面使用引入公共方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09