ionic滚动条 左右滑动上拉刷新
2017-12-15 14:07
330 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>滚动条</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
scroll 滚动条
-->
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('http://a.hiphotos.baidu.com/image/pic/item/50da81cb39dbb6fda2d331e50324ab18962b376d.jpg') repeat"></div>
</ion-scroll>
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<ion-content has-header="true">
<h1>Settings</h1>
</ion-content>
</ion-tab>
</ion-tabs>
<script type="text/javascript">
var mo = angular.module('myApp', ["ionic"]);
mo.controller("myCtrl", function($scope) {
})
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉加载</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css"/>
<script type="text/javascript">
var mo=angular.module("myApp",['ionic']);
mo.controller("myCtrl",function($scope,$http){
$scope.names=["你好啊","我来啦","别跑啊"]
$scope.refresh=function(){
$http.get("data/data1.json").then(function(req){
var newNames=req.data;
for (var i=0;i<newNames.length;i++) {
$scope.names.push(newNames[i].name);
}
$scope.$broadcast('scroll.refreshComplete')
},function(req){
Console.log("失败")
}).finally(function(){
})
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar class="bar-calm">
<h1 class="title">加载更多</h1>
</ion-header-bar>
<ion-content>
<ion-refresher pulling-text="刷新..." on-refresh="refresh()">
</ion-refresher>
<ul class="list">
<li class="item" ng-repeat="name in names track by $index">{{name}}</li>
</ul>
</ion-content>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左右滑动</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css"/>
<script type="text/javascript">
var mo=angular.module("myApp",['ionic']);
mo.controller("myCtrl",function($scope){
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-side-menus>
<ion-side-menu side="left">
<ul>
<li>李三</li>
</ul>
</ion-side-menu>
<ion-side-menu-content>
<div class="content">
流氓
</div>
</ion-side-menu-content>
<ion-side-menu side="right">
<ul>
<li>杜五</li>
</ul>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>滚动条</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
scroll 滚动条
-->
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('http://a.hiphotos.baidu.com/image/pic/item/50da81cb39dbb6fda2d331e50324ab18962b376d.jpg') repeat"></div>
</ion-scroll>
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<ion-content has-header="true">
<h1>Settings</h1>
</ion-content>
</ion-tab>
</ion-tabs>
<script type="text/javascript">
var mo = angular.module('myApp', ["ionic"]);
mo.controller("myCtrl", function($scope) {
})
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉加载</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css"/>
<script type="text/javascript">
var mo=angular.module("myApp",['ionic']);
mo.controller("myCtrl",function($scope,$http){
$scope.names=["你好啊","我来啦","别跑啊"]
$scope.refresh=function(){
$http.get("data/data1.json").then(function(req){
var newNames=req.data;
for (var i=0;i<newNames.length;i++) {
$scope.names.push(newNames[i].name);
}
$scope.$broadcast('scroll.refreshComplete')
},function(req){
Console.log("失败")
}).finally(function(){
})
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar class="bar-calm">
<h1 class="title">加载更多</h1>
</ion-header-bar>
<ion-content>
<ion-refresher pulling-text="刷新..." on-refresh="refresh()">
</ion-refresher>
<ul class="list">
<li class="item" ng-repeat="name in names track by $index">{{name}}</li>
</ul>
</ion-content>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左右滑动</title>
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/ionic.css"/>
<script type="text/javascript">
var mo=angular.module("myApp",['ionic']);
mo.controller("myCtrl",function($scope){
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-side-menus>
<ion-side-menu side="left">
<ul>
<li>李三</li>
</ul>
</ion-side-menu>
<ion-side-menu-content>
<div class="content">
流氓
</div>
</ion-side-menu-content>
<ion-side-menu side="right">
<ul>
<li>杜五</li>
</ul>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Android开发日记】左右滑动刷新界面的思路记录 ViewPager GestureDetector
- Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
- ionic3之下拉刷新，下滑动加载数据-yellowcong
- SwipeRefreshLayout上下刷新与左右滑动事件冲突的处理
- 重写SwipeRefreshLayout下拉刷新，避免在左右滑动时执行下拉刷新操作
- jQuery 滚动条插件之移动端 左右滑动不出现滚动条
- 快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
- 快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
- js 滑动滚动条时进行刷新列表
- 手机标题栏左右滑动无滚动条
- 仿QQ实现ListView中item的左右滑动同时实现ListView的上拉刷新和下拉加载更多
- UIWebView隐藏右侧和底部滚动条，去掉滚动边界的黑色背景,禁止左右滑动
- Ionic2创建App启动页左右滑动欢迎界面
- ionic 左右滑动 广告
- ionic_content——左右滑动（如地图）
- ios左右滑动页面刷新
- ionic3用Segment实现左右滑动菜单
- android仿新版UC首页，上滑隐藏顶部轮播图，支持单个栏目下拉刷新，左右滑动切换
- android TextView 带滚动条，和ScrollView 用法（暂时觉得ScrollView滑动速度比较快）
- 页面刷新后的滚动条位置不变！