使用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 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue调用语音播放的方法
Sep 27 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
JavaScript高级程序设计
2006/12/29 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
用python对oracle进行简单性能测试
2020/12/05 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
单位成立周年感言
2014/01/26 职场文书
社区党务公开实施方案
2014/03/18 职场文书
导师就业推荐信范文
2014/05/22 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
给老婆的保证书
2015/01/16 职场文书
食堂管理制度范本
2015/08/04 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技