使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码


Posted in Javascript onOctober 20, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title>
  <link rel="stylesheet" href="../ionic/css/ionic.css" rel="external nofollow" >
  <script src="../ionic/js/ionic.bundle.min.js"></script>
  <script type="text/javascript">
  angular.module('myApp', ['ionic'])
    .controller('RootCtrl', function($scope) {
      $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
        console.log('Controller changed', oldController, oldIndex, newController, newIndex);
        console.log(arguments);
      };
    })
    .controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
      $scope.items = [];
      $ionicModal.fromTemplateUrl('newTask.html', function(modal) {
        $scope.settingsModal = modal;
      });
      //ionic 上拉菜单(ActionSheet)
      var removeItem = function(item, button) {
        $ionicActionSheet.show({
          buttons: [],
          destructiveText: 'Delete Task',
          cancelText: 'Cancel',
          cancel: function() {
            return true;
          },
          destructiveButtonClicked: function() {
            $scope.items.splice($scope.items.indexOf(item), 1);
            return true;
          }
        });
      };
      var completeItem = function(item, button) {
        item.isCompleted = true;
      };
      $scope.onReorder = function(el, start, end) {
        ionic.Utils.arrayMove($scope.items, start, end);
      };
      $scope.onRefresh = function() {
        console.log('ON REFRESH');
        $timeout(function() {
          $scope.$broadcast('scroll.refreshComplete');
        }, 1000);
      }
      $scope.removeItem = function(item) {
        removeItem(item);
      };
      $scope.newTask = function() {
        $scope.settingsModal.show();
      };
      // Create the items
      $scope.user = [
        {
          name:"Ben Sparrow",
          words:"You on your way?"
        },
        {
          name:"Max Lynx",
          words:"Hey,it's me."
        },
        {
          name:"Adam Bradleyson",
          words:"I should buy a boat."
        },
        {
          name:"Perry Governor",
          words:"Look at my mukluks!"
        },
        {
          name:"Mike Harrinqton",
          words:"This is wicked good ice cream."
        },
      ];
    })
</script>
</head>
<body ng-app="myApp" ng-controller="RootCtrl">
<ion-tabs class="tabs-icon-only tabs-positive">
  <ion-tab title="Home"
       icon-on="ion-ios-filing"
       icon-off="ion-ios-filing-outline"
       ng-controller="HomeCtrl">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Chats</h1>
    </ion-header-bar>
    <ion-content has-tabs="true" on-refresh="onRefresh()">
      <ion-refresher></ion-refresher>
      <ion-list scroll="false" on-refresh="onRefresh()"
           s-editing="isEditingItems"
           animation="fade-out"
           delete-icon="icon ion-minus-circled">
        <ion-item ng-repeat="item in user"
             item="item"
             buttons="item.buttons"
             can-delete="true"
             can-swipe="true"
             on-delete="deleteItem(item)"
             ng-class="{completed: item.isCompleted}">
          <span>
            <img src="../img/y.jpg" height="56" width="56"/>
            <p style="margin-left: 66px;margin-top: -50px"><b>{{item.name}}</b></p>
            <p style="margin-left: 66px;">{{item.words}}</p>
            <i class="ion-chevron-right" style="float: right;margin-top: -32px""></i>
          </span>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-tab>
  <ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Deadlines</h1>
    </header>
    <ion-content has-header="true">
      <center>
        <img src="../img/q.jpg" height="462" width="427"/>
      </center>
    </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-stable">
      <h1 class="title">Settings</h1>
    </header>
    <ion-content has-header="true">
      <center>
        <img src="../img/y.jpg" height="462" width="427"/>
      </center>
    </ion-content>
  </ion-tab>
</ion-tabs>
</body>
</html>

总结

以上所述是小编给大家介绍的使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
判断访客终端类型集锦
Jun 05 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue的过滤器filter实例详解
Sep 17 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
2种简单的js倒计时方式
Oct 20 #Javascript
pm2 部署 node的三种方法示例
Oct 20 #Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 #Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 #Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 #Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 #Javascript
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
You might like
php文件缓存类用法实例分析
2015/04/22 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP7新特性
2021/03/09 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python 获取项目根路径的代码
2019/09/27 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
会计职业生涯规划范文
2014/01/04 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
回复函范文
2015/07/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
php png失真的原因及解决办法
2021/10/24 PHP
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL