zoukankan      html  css  js  c++  java
  • ionic 横向滚动 ion-scroll 进度条(步骤)// 根据后台数据控制当前默认滑动到的位置

    <ion-scroll zooming="false" direction="x" style=" 100%;" scrollbar-x='false' delegate-handle="gradeScroll">
        <div style='600px'>
            <div ng-repeat='item in items'>第{{$index}}步</div>
        </div>
    </ion-scroll>

    属性使用:

     zooming='false'   // 布尔值   是否支持双指缩放;  // 一般不是特殊需求都禁止用户自己缩放;

    min-zoom='0.8'  //整数   允许的最小缩放量(默认为0.5);

    direction="x"      //滚动的方向。 'x' 或 'y'。 默认 'y';

    scrollbar-x='false'   // 布尔值   是否显示水平滚动条。默认为false;

    scrollbar-y='false'   // 布尔值   是否显示垂直滚动条。默认为true;

    delegate-handle= 'gradeScroll'   // string  该句柄利用$ionicScrollDelegate指定滚动视图;

    angular.module('ionicApp', ['ionic'])
    
    .controller('SlideController', function($scope) {
      //回到顶部  
      $scope.scrollMainToTop = function() {
        $ionicScrollDelegate.$getByHandle('myScroll').scrollTop();
      };
    //  打开页面,默认滑动到的位置  : 
      $scope.scrollMain = function() {
          $ionicScrollDelegate.$getByHandle('gradeScroll').scrollBy(200,0);
        // scrollBy(left,top); 这里的值可以通过后台传来的参数进行计算,
    // 假设 一共有6个步骤,那此 案例一共是中间会间隔 6-1 个 平均距离;
    // 那每一个中间的间距为 600px/(6-1) ==120px;
        // 假如后台传给你是 进行到了 第3步,那你需要向左移动的是 (3-1)*120px //240px;
    // 这样,你的 当前步骤就会显示在 当前滚动行的 第一个 位置;
    // scrollBy(left,top); }
    $scope.scrollPosition = function() {
     
    $ionicScrollDelegate.$getByHandle('gradeScroll').getScrollPosition();
       // 返回 滚动到该视图的位置,具有一下属性:
    // left 从左侧到用户已滚动的距离(开始为 0);
    // top 从顶部到用户已滚动的距离 (开始为 0);
    }
    })

    其他的属性应用: 

    http://www.ionic.wang/js_doc-index-id-30.html

  • 相关阅读:
    windows下在命令行模式下使用MinGW编译C代码,出现cannot find ipthread
    Python入门系列——第4篇
    Python入门系列——第3篇
    python入门系列——第2篇
    Python入门系列——第1篇
    Python入门系列——第0篇
    PAT(乙级)1038
    WPF QuickStart系列之附加属性(Attached Property)
    WPF 自定义Metro Style窗体
    WPF QuickStart系列之数据绑定(Data Binding)
  • 原文地址:https://www.cnblogs.com/loveyaxin/p/7262268.html
Copyright © 2011-2022 走看看