A. vue-scroller記錄滾動位置的示例代碼
問題描述:
列表頁進入詳情頁，或者tab頁切換，然後再返回列表頁，希望能切換到之前滾動位置
解決問題思路:
切換到其他頁面前記錄位置，返回列表頁的時候返回位置。這就需要藉助vue-router的beforeRouteEnter和beforeRouteLeave這兩個鉤子去實現.
還有一種更簡單粗暴的方法，
vue-scroller.min.js源碼中添加寬高不為零判斷，實現方式見評論，是最近代碼優化的時候發現的。
代碼部分:
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon
||
from.path
==
'/'){//當前頁面刷新不需要切換位置
sessionStorage.askPositon
=
'';
next();
}else{
next(vm
=>
{
if(vm
&&
vm.$refs.scrollerBottom){//通過vm實例訪問this
setTimeout(function
()
{
vm.$refs.scrollerBottom.scrollTo(0,
sessionStorage.askPositon,
false);
},0)//同步轉非同步操作
}
})
}
},
beforeRouteLeave(to,from,next){//記錄離開時的位置
sessionStorage.askPositon
=
this.$refs.scrollerBottom
&&
this.$refs.scrollerBottom.getPosition()
&&
this.$refs.scrollerBottom.getPosition().top;
next()
},
需要注意的點:
1.熟悉vue-router和vue-scroller的api
2.beforeRouteEnter的時候，是無法通過this去訪問vue實例的，需要藉助於vm
3.setTimeout
0
的使用
等下周發版的時候，我貼上鏈接，可以體驗下效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:詳解使用vue-router進行頁面切換時滾動條位置與滾動監聽事件解決Vue頁面固定滾動位置的處理辦法vue實現某元素吸頂或固定位置顯示（監聽滾動事件）
B. 如何在JavaScript里防止事件函數的高頻觸發和調用
throttle節流閥技術可以防止事件函數（例如滾輪滾動）的回調函數被頻繁調用。
節流閥函數的實現原理是：
節流函數每次執行時都會檢查上次執行的時間，通過指定wait參數，來保證只有距離上次執行超過一定時間，才會真正執行內部包裹的回調函數。由此來避免一種重量級的函數（如重繪或者dom操作）被頻繁調用而導致產生性能問題。
以underscore.js的實現為例
varscroller=document.getElementById('scroller_div');
//此時console.log最多每300毫秒列印一次，不管onscroll事件觸發得多麼頻繁，都不會超過這個頻率。
scroller.onscroll=_.throttle(function(){
console.log(scroller.scrollTop);
},300);
C. jquery mobiscroll插件怎樣阻止冒泡
這個不是冒泡，這個是android的默認瀏覽器webbiew的bug，穿透浮層點擊，只能在確定之前固定一個狀態，確定後取消，現在這個bug沒修復
D. 求上下浮動的圖片在指定的區域內隨瀏覽器上下滾動的js代碼
關鍵代碼：
main-left：左側參照DIV；
main-right：要浮動的；
div.top-box：頁面頂部的Fixed層；
$(document).ready(function(){
$(window).scroll(function(){
var
leftTop=$("#main-left").offset().top;
varrightTop=
$("#main-right").offset().top;
varscrollerTop=$(this).scrollTop()+
$("div.top-box").height();
if(scrollerTop>leftTop){
if
(scrollerTop+$("#main-right").height()<leftTop+
$("#main-left").height()){
if($("#main-right").css("position")!=
"fixed"){
$("#main-right").css({"position":"fixed",
"left":$("#main-right").offset().left+"px","top":$("div.top-box").height()+
"px"});
}
}else{
$("#main-right").css({"position":"fixed",
"left":$("#main-right").offset().left+"px","top":($("div.top-box").height()-
(scrollerTop+$("#main-right").height()-(leftTop+$("#main-left").height()))
)+"px"});
}
}else{
if($("#main-right").css("position")!=
"static"){
$("#main-right").css({"position":"static"});
}
}
});
});