ionic 横向滚动 ion-scroll 进度条(步骤)// 根据后台数据控制当前默认滑动到的位置
<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 进度条(步骤)// 根据后台数据控制当前默认滑动到的位置的更多相关文章
- pacejs进度条监控服务端数据加载是否完毕
记得刚刚入职新公司的时候,公司在做app里面的h5页面.跟之前公司的流程不太一样.之前都是写完静态页面后通过ajax加载接口数据,这公司省事了,写完静态页面直接扔给服务端,他们来填数据,确实给前端省事 ...
- Android 电池电量进度条,上下滚动图片的进度条(battery)
最近,制作一个app,需要模拟一个电池电量的进度条,根据电量多少来设置百分比,进度条不断上下滚动,就像平时手机充电一样的电池电量进度条.我就自定义view实现了电量进度条.修改图片就可以达到自己想要的 ...
- 给 layui upload 带每个文件的进度条, .net 后台代码
1.upload.js 扩展 功能利用ajax的xhr属性实现该功能修改过modules中的upload.js文件功能具体实现:在js文件中添加监听函数 //创建监听函数 var xhrOnProgr ...
- Qt之模型/视图(自定义进度条)
简述 在之前的章节中分享过关于QHeaderView表头排序.添加复选框等内容,相信大家模型/视图.自定义风格有了一定的了解,下面我们来分享一个更常用的内容-自定义进度条. 实现方式: 从QAbstr ...
- C# 时间控件 竖直进度条 饼图显示 仪表盘 按钮基础控件库
Prepare 本文将使用一个NuGet公开的组件来实现一些特殊的控件显示,方便大家进行快速的开发系统. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控制台 ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条
QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...
- 利用overflow-x实现横向滚动的xiaoguo
在进行app开发中经常遇到横向滚动的效果,相信很多人都是用js写的吧,其实用css的overflow-x也可以写出啦哦~~~ (1)介绍overflow-x: 1)浏览器支持 所有主流浏览器都支持 o ...
- js(ext)中,设置[!!异步!!]上传的简单进度条
代码在updateHmis的历史记录中,此处存档 handler : function() { //显示进度条 Ext.MessageBox.wait('数据上传中...','提示'); //上传数据 ...
随机推荐
- 【quickhybrid】JSBridge的实现
前言 本文介绍quick hybrid框架的核心JSBridge的实现 由于在最新版本中,已经没有考虑iOS7等低版本,因此在选用方案时没有采用url scheme方式,而是直接基于WKWebView ...
- 沉迷 Docker,无法自拔(在 Docker 中运行 MySQL)
记得之前做网站开发的时候,因为服务端用的 MySQL 数据库,为了方便调试以及隔离生产与开发环境,自己就在本地也安装了一个 MySQL 数据库.但是用着用着慢慢的也发现了一些不舒服的地方,比如常驻后台 ...
- solr6.5搭建以及使用经验
首先搭建环境为Linux 6.5 64位 jdk1.7 将webapp目录复制到tomcat下的webapps目录下 可以修改文件夹名为solr(这个自己随意定义,项目名而已) 在tomcat目录下 ...
- JAVA9模块化详解(二)——模块的使用
JAVA9模块化详解(二)--模块的使用 二.模块的使用 各自的模块可以在模块工件中定义,要么就是在编译期或者运行期嵌入的环境中.为了提供可靠的配置和强健的封装性,在分块的模块系统中利用他们,必须确定 ...
- ATL环境:设置父窗口激活属性
设置窗口激活属性:窗口A->B->C,这里设置在C对话框显示时A和B都不能操作 LRESULT sindykTools::AttrPOIDlg::OnBatchCreateSubPoint ...
- Android项目实战(三十六):给背景加上阴影效果
圆角背景大家应该经常用: 一个drawable资源文件 里面控制corner圆角 和solid填充色 <shape xmlns:android="http://schemas.and ...
- Lua 数组排序 table.sort的注意事项
1. table中不能有nil table.sort是排序函数,它要求要排序的目标table的必须是从1到n连续的,即中间不能有nil. 2. 重写的比较函数,两个值相等时不能return true ...
- iOS 类似朋友圈的图片浏览器SDPhotoBrowser
SDPhotoBrowser.Demo 1.在文件SDBrowserImageView.m中有用SDWebImage到网络加载图片 需要的注释去掉即可 #import "ViewContro ...
- bzoj 1597: [Usaco2008 Mar]土地购买
Description 农 夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足(1 <= 宽 <= 1,000 ...
- bzoj 4569: [Scoi2016]萌萌哒
Description 一个长度为n的大数,用S1S2S3...Sn表示,其中Si表示数的第i位,S1是数的最高位,告诉你一些限制条件,每个条 件表示为四个数,l1,r1,l2,r2,即两个长度相同的 ...