免費AI編程助手
ionic 滾動條
2018-12-27 11:18 更新
ionic 滾動條
ion-scroll
ion-scroll 用于創(chuàng)建一個可滾動的容器。
用法
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle (可選) | 字符串 | 該句柄利用 |
| direction (可選) | 字符串 | 滾動的方向。 'x' 或 'y'。 默認(rèn) 'y'。 |
| paging (可選) | 布爾值 | 分頁是否滾動。 |
| on-refresh (可選) | 表達(dá)式 | 調(diào)用下拉刷新， 由 |
| on-scroll (可選) | 表達(dá)式 | 當(dāng)用戶滾動時觸發(fā)。 |
| scrollbar-x (可選) | 布爾值 | 是否顯示水平滾動條。默認(rèn)為false。 |
| scrollbar-y (可選) | 布爾值 | 是否顯示垂直滾動條。默認(rèn)為true。 |
| zooming (可選) | 布爾值 | 是否支持雙指縮放。 |
| min-zoom (可選) | 整數(shù) | 允許的最小縮放量（默認(rèn)為0.5） |
| max-zoom (可選) | 整數(shù) | 允許的最大縮放量（默認(rèn)為3） |
實例
HTML 代碼
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('http://o2fo.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
CSS 代碼
body { cursor: url('//o2fo.com/statics/demosource/finger.png'), auto; }
JavaScript 代碼
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
當(dāng)用戶到達(dá)頁腳或頁腳附近時，ionInfiniteScroll指令允許你調(diào)用一個函數(shù) 。
當(dāng)用戶滾動的距離超出底部的內(nèi)容時，就會觸發(fā)你指定的on-infinite。
用法
<ion-content ng-controller="MyController"> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content>
function MyController($scope, $http) { $scope.items = []; $scope.loadMore = function() { $http.get('/more-items').success(function(items) { useItems(items); $scope.$broadcast('scroll.infiniteScrollComplete'); }); }; $scope.$on('stateChangeSuccess', function() { $scope.loadMore(); }); }
當(dāng)沒有更多數(shù)據(jù)加載時，就可以用一個簡單的方法阻止無限滾動，那就是angular的ng-if 指令:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| on-infinite | 表達(dá)式 | 當(dāng)滾動到底部時觸發(fā)的事件。 |
| distance (可選) | 字符串 | 從底部滾動到觸發(fā)on-infinite表達(dá)式的距離。默認(rèn): 1%。 |
| icon (可選) | 字符串 | 當(dāng)加載時顯示的圖標(biāo)。默認(rèn): 'ion-loading-d'。 |
$ionicScrollDelegate
授權(quán)控制滾動視圖（通過ion-content 和 ion-scroll指令創(chuàng)建）。
該方法直接被$ionicScrollDelegate服務(wù)觸發(fā)，來控制所有滾動視圖。用 $getByHandle方法控制特定的滾動視圖。
用法
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滾動到頂部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
方法
resize()
告訴滾動視圖重新計算它的容器大小。
scrollTop([shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate (可選) | 布爾值 | 是否應(yīng)用滾動動畫。 |
scrollBottom([shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate (可選) | 布爾值 | 是否應(yīng)用滾動動畫。 |
以上內(nèi)容是否對您有幫助：
更多建議：