<ion-scroll zooming="false" 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='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

ionic 横向滚动 ion-scroll 进度条(步骤)// 根据后台数据控制当前默认滑动到的位置的更多相关文章

  1. pacejs进度条监控服务端数据加载是否完毕

    记得刚刚入职新公司的时候,公司在做app里面的h5页面.跟之前公司的流程不太一样.之前都是写完静态页面后通过ajax加载接口数据,这公司省事了,写完静态页面直接扔给服务端,他们来填数据,确实给前端省事 ...

  2. Android 电池电量进度条,上下滚动图片的进度条(battery)

    最近,制作一个app,需要模拟一个电池电量的进度条,根据电量多少来设置百分比,进度条不断上下滚动,就像平时手机充电一样的电池电量进度条.我就自定义view实现了电量进度条.修改图片就可以达到自己想要的 ...

  3. 给 layui upload 带每个文件的进度条, .net 后台代码

    1.upload.js 扩展 功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现:在js文件中添加监听函数 //创建监听函数 var xhrOnProgr ...

  4. Qt之模型/视图(自定义进度条)

    简述 在之前的章节中分享过关于QHeaderView表头排序.添加复选框等内容,相信大家模型/视图.自定义风格有了一定的了解,下面我们来分享一个更常用的内容-自定义进度条. 实现方式: 从QAbstr ...

  5. C# 时间控件 竖直进度条 饼图显示 仪表盘 按钮基础控件库

    Prepare 本文将使用一个NuGet公开的组件来实现一些特殊的控件显示,方便大家进行快速的开发系统. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控制台 ...

  6. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  7. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

  8. 利用overflow-x实现横向滚动的xiaoguo

    在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...

  9. js(ext)中,设置[!!异步!!]上传的简单进度条

    代码在updateHmis的历史记录中,此处存档 handler : function() { //显示进度条 Ext.MessageBox.wait('数据上传中...','提示'); //上传数据 ...

随机推荐

  1. 搭建angular1 gulp项目(上传到gitup)

    (安装好相关的前端环境) 1.新建一个文件夹,名字为angular-gulp,dos命令切换到该目录,输入npm init,继续添上你需要的信息,ok之后目录中多了package.json(管理项目所 ...

  2. Natas Wargame Level26 Writeup(PHP对象注入)

    源码: <?php // sry, this is ugly as hell. // cheers kaliman ;) // - morla class Logger{ private $lo ...

  3. WebGL学习(3) - 3D模型

      原文地址:WebGL学习(3) - 3D模型   相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是

  4. IDEA配置jdk

    提前安装jdk,配置环境变量 一.配置jdk 1.依次点开File -->Project Structure,点击左侧标签页,点击SDKs 2.点击+号,选SDK 3.按照这个顺序,可以配置多个 ...

  5. 当前时间、前n天、后n天、取前n条记录、从第n条开始取m条

    当前时间:NOW() 前n天:DATE_SUB(NOW(),INTERVAL n DAY) 后n天:DATE_SUB(NOW(),INTERVAL -n DAY) 取前n条记录:SELECT * FR ...

  6. iOS 数据加密方案

    iOS安全攻防(二十三):Objective-C代码混淆 提交用户的隐私数据 一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中 ...

  7. 用LinkedList集合演示栈和队列的操作

    在数据结构中,栈和队列是两种重要的线性数据结构.它们的主要不同在于:栈中存储的元素,是先进后出:队列中存储的元素是先进先出.我们接下来通过LinkedList集合来演示栈和队列的操作. import ...

  8. HttpClient4.5 post请求xml到服务器

    1.加入HttpClient4.5和junit依赖包 <dependencies> <dependency> <groupId>org.apache.httpcom ...

  9. ArcGIS 网络分析[2.1] 最短路径

    最短路径求解 [如果看到此博客还没有网络数据集的,请参考第一章的内容,点击我,看目录] 最短路径,是什么最短?时间最短?距离最短?什么距离?路程距离? 考虑到拥堵问题,限速问题,换乘问题,在现实的最短 ...

  10. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...