使用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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 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
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python中常见的数据类型小结
2015/08/29 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
新年主持词
2014/03/27 职场文书
党支部评议意见
2015/06/02 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers