Ionic JS 16: Scroll bar

Source: Internet
Author: User

Ion-scroll

The ion-scroll is used to create a scrollable container.

<Ion-scroll[Delegate-handle=""] [Direction=""] [Paging=""] [On-refresh=""] [On-scroll=""] [Scrollbar-x=""] [scrollbar-y=""] [zooming=""] [Min-zoom=""] [Max-zoom=""]>    ...</Ion-scroll>

?

HTML Code

 <  ion-scroll  zooming  = "true"   direction  = "XY"   style   >  <  div  style   ></ div  >  </ ion-scroll  >  

CSS Code

{  cursor: url (' http://www.runoob.com/try/demo_source/finger.png '), Auto;}

JavaScript Code

Angular.module (' Ionicapp ', [' Ionic ']);

Ion-infinite-scroll

The ioninfinitescroll directive allows you to invoke a function when the user arrives near the footer or footer.
The on-infinite you specify is triggered when the user scrolls farther than the content at the bottom.

<ng-controller= "Mycontroller">  <  Ion-infinite-scroll    on-infinite= "Loadmore ()"    distance= "1%"  >  </ion-infinite-scroll> </  Ion-content>

function Mycontroller ($scope, $http) {  = [];   function () {    $http. Get ('/more-items '). Success (function(items) {      useitems (items);      $scope. $broadcast (' scroll.infinitescrollcomplete ')  ;}; $scope. $on (function() {    $scope. Loadmore ();  });}

When no more data is loaded, there is a simple way to block infinite scrolling, which is the angular ng-if command:

< Ion-infinite-scroll   ng-if = "moredatacanbeloaded ()"   icon= "Ion-loading-c"  on-infinite= "Loadmoredata ()">  </ion-infinite-scroll>

?

$ionicScrollDelegate

Authorization Controls the scrolling view (created by ion-content and Ion-scroll directives).
This method is triggered directly by \ (Ionicscrolldelegate service) to control all scrolling views. Use the \) Getbyhandle method to control a specific scrolling view.

 <  body  ng-controller  = "Mainctrl"   >  <  ion-content     >  <  button  ng-click  = "scrolltop ()"  >  scroll to the top! </ button   >  </ ion-content  >  </ body  >  

function Mainctrl ($scope, $ionicScrollDelegate) {  function() {    $ Ionicscrolldelegate.scrolltop ();  };}

?

Ionic JS 16: Scroll bar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.