ionic 横向滚动 ion-scroll 根据后台数据控制当前默认滑动到的位置

Posted 雅昕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic 横向滚动 ion-scroll 根据后台数据控制当前默认滑动到的位置相关的知识,希望对你有一定的参考价值。

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

属性使用:

 zooming=‘true‘   // 布尔值   是否支持双指缩放;

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

以上是关于ionic 横向滚动 ion-scroll 根据后台数据控制当前默认滑动到的位置的主要内容,如果未能解决你的问题,请参考以下文章

ionic ion-scroll 滚动父页面

ionic使用ion-scroll实现竖向侧边可滚动菜单栏

ionic 3.2 - 如何禁用离子含量的滚动?

如何在ionic 3中进行水平滚动

ionic3——ion-scroll无法使用scrollTo的问题

ionic3 水平滚动 + 点击元素滚动到某元素