使用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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
javascript实现计算器功能详解流程
Nov 01 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
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python生成任意频率正弦波方式
2020/02/25 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
医药专业推荐信
2013/11/15 职场文书
中国央视网签名寄语
2014/01/18 职场文书
市场营销方案范文
2014/03/11 职场文书
经典婚礼主持词
2014/03/13 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
节约用电通知
2015/04/25 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS