今天因為業務需要,需要實現一個功能,就是:
"當頁面滑動到一定高度后,出現頂置按鈕",這或許不是很難的一個功能,但是對於菜鳥來說的說,我並不會,所以自己上網查了查,有很大的收獲,所以我就記錄了下來.
因為是是開發移動端,但是由於PC端也有同樣的效果,但是代碼有點不一樣,所以就分開寫了.
移動端:
使用的框架是ionic和angular,因為是剛入行的菜鳥,所以ionic和angular也不是很熟練,這里便不深入解釋.
ionic有一個標簽<ion-content> 這個標簽(我個人稱為標簽,因為挺像的)有一個屬性on-scroll="",on-scroll,該方法的作用是,當滑動<ion-content>標簽的內容時,會執行on-scroll的方法.所以我們可以通過這個方法獲取頁面滑動的高度為多少.
然后可以通過注入ionic的$ionicScrDelegate服務的getScorllPosition()方法獲取到視圖對象
getScorllPosition()方法 返回: 對象 滾動到該視圖的位置，具有以下屬性：
{數值}left從左側到用戶已滾動的距離(開始為 0)。{數值}top從頂部到用戶已滾動的距離 (開始為 0).
(滑動100px == $ionicScrDelegate.getScorllPosition().top == 100)
所以整個功能的大致步驟為:
1,做一個頂置圖標,用絕對定位定位到頁面某處,然后使用ng-show='config.showTop'去隱藏該圖標(因為使用的是angularjs),'config.showTop'為自定義的對象屬性,初始化為false
2,新建一個方法,該方法用於獲取視圖所滑動的距離,該方法放在<ion-content>標簽 <ion-content id="content" class="has-header" on-scroll="toTopScroll()">
3,當滑動距離大於某個數值的時候,config.showTop的值變成true,頂置圖標就顯示出來了,相反的,如果小於,就為false.
$scope.toTopScroll = function(){ $scope.config.showTop = $ionicScrollDelegate.getScrollPosition().top>250?true:false. };
注意:1,有on-scroll屬性的<ion-content>外面不能有<ion-pane>,否則獲取不到視圖滑動的距離值
2,<ion-infinite-scroll>標簽是必須有的,不然效果很難看.
PC端:
pc端原理是一樣的,但是使用的技術不同,使用的是JQuery的方法(可能有更好的,其實移動端也可以用JQuery完成.)
原理就不說了,直接說區別吧,不同的區別只有兩點:
1,$(window).scroll() //當我們操作頁面滾動時,會觸發該方法 ,該方法內執行一個函數
2,$(window).scrollTop() //可以獲取滾動條的垂直位置
其他的和移動端基本一樣.
這是第一篇隨筆,寫得肯定不好,多多包涵.