Ionic中基于js的扩展(指令和服务)来实现各种效果
1、ion-header-bar ion-footer-bar ion-content
align-title='left/ritght/center
<body> <ion-header-bar align-title="left" class="bar-positive"> <h1 class="title">header</h1> </ion-header-bar> <ion-content ng-controller="myCtrl" scroll="false" > <!-- * overflow-scroll:false 是否使用默认滚动条 * scroll:true 是否允许滚动 --> <ul class="list"> <li class="item" ng-repeat="temp in list"> {{temp}} </li> </ul> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl', ['$scope', function ($scope) { $scope.list = []; for (var i = 0; i < 100; i++) { $scope.list.push(i); } }]) </script>
2、ion-refresher 下拉刷新
ion-refresher作为ion-content的第一个元素
<ion-refresher pulling-text='下拉刷新' on-refresh='refresh()'>
</ion-refresher>
结束刷新动作：
$scope.$broadcast('scroll.refreshComplete');
<body> <ion-header-bar> <h1 class="title">header</h1> </ion-header-bar> <!--下拉刷新组件--> <ion-content ng-controller="myCtrl"> <ion-refresher on-refresh="refresh()" pulling-text="下拉加载"></ion-refresher> <ul class="list"> <li class="item" ng-repeat="temp in list">{{temp}}</li> </ul> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl', ['$scope', function ($scope) { $scope.list = [4, 3, 2, 1, 0]; $scope.refresh = function () { $scope.list.unshift($scope.list.length); $scope.$broadcast('scroll.refreshComplete'); } }]); </script>
3、ion-infinite-scroll 上拉加载更多
ion-infinite-scroll作为ion-content的最后一个元素
<ion-infinite-scroll on-infinite='loadMore()' immediate-check='false'>
</ion-infinite-scroll>
结束加载更多的动作
$scope.$broadcast('scroll.infiniteScrollComplete');
<body> <ion-header-bar> <h1 class="title">header</h1> </ion-header-bar> <ion-content ng-controller="myCtrl"> <p>Hello</p> <ul class="list list-inset"> <li class="item" ng-repeat="tmp in list track by $index">{{tmp}}</li> </ul> <!--下拉加载更多--> <ion-infinite-scroll on-infinite="loadMore()" immediate-check="false"></ion-infinite-scroll> <!-- immediate-check="false" 禁止自动检查 默认为true 数据初始化会自动触发 loadMore --> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl',['$scope','$timeout', function ($scope,$timeout) { $scope.list = [0,1,2,3,4]; $scope.loadMore = function () { $scope.list.push($scope.list.length); $timeout(function(){ $scope.$broadcast('scroll.infiniteScrollComplete'); },1000) } }]); </script> </body>
4、$ionicScrollDelegate 处理和滚动的方法
方法：scrollTop\scrollBottom\scrollTo\getScrollPosition()
<body ng-controller="myCtrl"> <ion-header-bar> <h1 class="title">header</h1> </ion-header-bar> <ion-content> <ul class="list"> <li class="item" ng-repeat="i in list">{{i}}</li> </ul> </ion-content> <ion-footer-bar> <button class="button button-positive" ng-click="goTop()">goTop</button> <button class="button button-assertive" ng-click="goBottom()">goBottom</button> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl', ['$scope', '$ionicScrollDelegate', function ($scope, $ionicScrollDelegate) { $scope.list = []; for (var i = 0; i < 50; i++) { $scope.list.push(i); } // 滚动到顶部----》 params true :开启动画 $scope.goTop = function () { $ionicScrollDelegate.scrollTop(true); }; // 滚动到底部 $scope.goBottom = function () { $ionicScrollDelegate.scrollBottom(true); }; // 获得当前滚动位置信息 // 返回一个对象 // .top // .left $scope.getScrollPosition = function () { var obj = $ionicScrollDelegate.getScrollPosition() console.log(obj.top); }; // 滚动到指定位置 // scrollTo(left,top,是否开启动画) $scope.set = function () { $ionicScrollDelegate.scrollTo(0,540,true); } }]); </script> </body>
5、ionTabs
<ion-tabs class='tabs-positive tabs-icon-left/right/only'></ion-tabs>
<ion-tab title='123' ng-click='func1()' icon-on/off=''>
<!--<ion-content>--> <!-- * ion-tabs 不能放入 一个 ion-content 中 * ion-tabs 选项卡区域默认在底部 --> <!--</ion-content>--> <ion-tabs class="tabs-positive tabs-icon-left"> <ion-tab title="音乐" icon="ion-headphone" ng-click="fun1()"> <!--icon-in icon-off--> <ion-view> <ion-content class="energized-bg"> <h1>这里是音乐的页面</h1> </ion-content> </ion-view> </ion-tab> <ion-tab title="游戏" icon="ion-ios-game-controller-b-outline"> <ion-view> <ion-content class="positive-bg"> <h1>这里是游戏的页面</h1> </ion-content> </ion-view> </ion-tab> </ion-tabs>
6、侧边栏菜单(面板、抽屉)
<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side='left/right' width=''></ion-side-menu>
</ion-side-menus>
方式1：扩展属性
menu-toggle='left/right'
menu-close
方式2：js的方式
$ionicSideMenuDelegate:
toggleLeft(true/false)
toggleRight(true/false)
isOpenLeft/right()
<ion-side-menus> <ion-side-menu-content> <ion-header-bar> <button class="button badge-positive icon ion-navicon" menu-toggle="left"></button> <h1 class="title">header</h1> <button class="button button-assertive" ng-click="show(true)">打开右边菜单</button> </ion-header-bar> <ion-content> <h2>Hello sideMenu</h2> </ion-content> </ion-side-menu-content> <!--从左边打开的侧边栏菜单--> <ion-side-menu side="left"> <button ng-click="show(false)" class="button icon ion-close"></button> <ul class="list"> <li class="item">个人中心</li> <li class="item">关于</li> <li class="item">设置</li> </ul> </ion-side-menu> <!--从右边打开的侧边栏菜单--> <ion-side-menu side="right"> <button class="button button-positive" menu-close="">点击关闭</button> </ion-side-menu> </ion-side-menus> <script src="js/ionic.bundle.min.js"></script> <script> /* * $ionicSideMenuDelegate * * toggleLeft/Right * isOpen/Left/Right * * */ angular .module('myApp', ['ionic']) .controller('myCtrl',['$scope','$ionicSideMenuDelegate', function ($scope,$ionicSideMenuDelegate) { $scope.show = function (arg) { $ionicSideMenuDelegate.toggleRight(arg); } }]) </script>
7、$ionicModal 自定义弹窗
$ionicModal.fromTemplate/fromTemplateUrl('url',{scope:$scope}).then(function(modall){})
<body ng-controller="myCtrl"> <script id="myModal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1>Header</h1> </ion-header-bar> <ion-content> <h3>Hello $iocnModal</h3> </ion-content> </ion-modal-view> </script> <ion-header-bar> <h1 class="title">header</h1> </ion-header-bar> <ion-content> <p>page</p> <button class="button button-positive" ng-click="openModal()">打开一个弹窗</button> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl',['$scope','$ionicModal', function ($scope,$ionicModal) { $scope.openModal = function () { $ionicModal.fromTemplateUrl('myModal.html',{ scope:$scope // 指定数据作用域 }) .then(function (modal) { // 获得实例 $scope.modal = modal; $scope.modal.show(); }) } }]); </script> </body>
8、$ionicActionSheet 操作表
$ionicActionSheet.show({
buttons:
buttonClicked:
titleText:
destructiveText:
destructiveButtonClicked
cancelText:
cance:function
})
<body ng-controller="myCtrl"> <ion-header-bar> <h1 class="title">header</h1> </ion-header-bar> <ion-content> <p>Hello $ionicActionSheet</p> <button class="button badge-calm" ng-click="show()">ShowActionSheet</button> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl', ['$scope', '$ionicActionSheet', function ($scope, $ionicActionSheet) { $scope.show = function () { $ionicActionSheet.show({ // 配置弹窗的内容 buttons: [ {text: '编辑'}, {text: '撤销'} ], buttonClicked: function (index) { console.log(index); }, destructiveText: "删除", destructiveButtonClicked: function () { console.log('执行一些删除操作'); // 操作完成后关闭弹窗 return true; }, titleText: "actionSheetTitle", cancelText: '取消' }) } }]); </script> </body>
9、$ionicPopup 弹窗
alert/prompt/confirm
$ionicLoading
用一个覆盖层表示当前处于活动状态，来阻止用户的交互动作
$ionicLoading.show()/hide()
<body ng-controller="myCtrl"> <ion-header-bar> <h1 class="title">header</h1> <button class="button icon ion-refresh" ng-click="showLoading()">刷新</button> </ion-header-bar> <ion-content> <button class="button button-positive" ng-click="showAlert()">弹窗 Alert</button> <button class="button button-positive" ng-click="showConfirm()">弹窗 Confirm</button> <button class="button button-positive" ng-click="showPrompt()">弹窗 Prompt</button> </ion-content> <ion-footer-bar> <h1 class="title">footer</h1> </ion-footer-bar> <script src="js/ionic.bundle.min.js"></script> <script> angular .module('myApp', ['ionic']) .controller('myCtrl', ['$scope', '$timeout', '$ionicPopup', '$ionicLoading', function ($scope, $timeout, $ionicPopup, $ionicLoading) { // 显示一个加载中的窗口 $scope.showLoading = function () { $ionicLoading.show({ template: '正在加载' }); $timeout(function () { $scope.hideLoading(); },2000); }; // 隐藏一个加载中的窗口 $scope.hideLoading = function () { $ionicLoading.hide() }; // 显示一个警告框 $scope.showAlert = function () { $ionicPopup.alert({ title: 'Donnot touch', template: '食物有毒' }) }; // 显示一个确认框 $scope.showConfirm = function () { $ionicPopup.confirm({ title: '请确认', template: '确定要这样操作吗？' }).then(function (result) { // 拿到confirm的结果 console.log(result); }) }; // 显示一个确认输入框 $scope.showPrompt = function () { $ionicPopup.prompt({ title: '标题', template: '请输入金额' }).then(function (result) { console.log(result); }) } }]) </script> </body>
