ionic 自定义teb切换


         //HTML 代码
        <div  class="row">
          <div class=" tabs  gem-position-static profile-tabs" ng-repeat="item in initSlideTabs.data">
             <a   class="tab-item "  href="#" ng-click="activeSlide($index)" ng-bind="item.name">
            </a>
          </div>
        </div>

        <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex"  does-continue="{{initSlideTabs.doesContinue}}" show-pager="{{initSlideTabs.showPager}}">
            <ion-slide ng-repeat="item in initSlideTabs.data">
                <div ng-include="item.tpl" class="padding"></div>
            </ion-slide>
        </ion-slide-box>
/*个人主页*/ controller.js
    .controller('personHomeCtrl', function ($scope,$ionicSlideBoxDelegate) {
        //初始化slidetabs数据
        $scope.initSlideTabs = {
            data:[
                {name:"主页",tpl:'templates/person/person-home-page.html'},
                {name:"课程",tpl:'templates/person/person-course.html'},
                {name:"文章",tpl:'templates/person/ad.html'},
                {name:"作业",tpl:'templates/person/ad.html'}
            ],//tab的内容
            doesContinue:false,//是否循环切换
            showPager:false//是否显示小黑点
            //slideInterval:4000//自动切换的时间间隔
        };
        //默认选择第一个
        $scope.slideIndex = 0;
        //滑动下面的滑块,响应上面的tabs切换
        $scope.slideChanged = function(index) {
            $scope.slideIndex = index;
        };
        //点击上面的tabs切换,响应下面的滑块滑动
        $scope.activeSlide = function (index) {
            $ionicSlideBoxDelegate.slide(index);
        };

    })

源码:

http://download.csdn.net/detail/qinguicheng/9512076

时间: 2024-11-03 17:01:45

ionic 自定义teb切换的相关文章

1.自定义控制器切换&lt;一&gt;

一.自定义控制器切换:在同一个控制器上,展示不同的控制器,类似于tabbar一样 二.怎么做?(问题解决步骤) 1.创建若干控制器:OneViewController TwoViewController ..... 2.定义一个现实的控制器: //定义: @property (nonatomic, weak) UIViewController *showingVc; self.childViewControllers= @[ [[ZSOneViewController alloc] init],

[cocos2dx笔记007]一个自定义场景切换的实例

cocos2dx框架已经提供了很多场景切换的类,但是一些自定义的场景切换,只有自己实现了.下面是实现的类.这里设计的分辨率是750*500.请根据实际的要求调整. 头文件 #ifndef _TRANSITION_GAME_H_ #define _TRANSITION_GAME_H_ #include <cocos2d.h> namespace cocos2d { class CCTransitionGame : public CCTransitionScene { public: CCTran

C# WPF 简单自定义菜单切换动画

微信公众号:Dotnet9,网站:Dotnet9,问题或建议,请网站留言: 如果您觉得Dotnet9对您有帮助,欢迎赞赏 C# WPF 简单自定义菜单切换动画 内容目录 实现效果 业务场景 编码实现 本文参考 源码下载 1.实现效果 自定义菜单切换动画 2.业务场景 菜单切换动画 3.编码实现 3.1 添加Nuget库 使用 .Net Core 3.1 创建名为"CustomMenu"的WPF解决方案,添加两个Nuget库:MaterialDesignThemes和MaterialDe

自定义视图切换效果

先创建一个UIStoryboardSegue子类并覆盖perform方法.在perform方法中,拿到指向源视图控制器的主视图图层的指针,然后实现自定义切换动画(使用Core Animation).一旦动画完成,就可以推送(push)到目标视图控制器(可以从联线对象中获得一个指向该视图控制器的指针). #import "CustomSegue.h" @implementation CustomSegue -(void)perform { UIViewController*src=(UI

NGUI使用3——制作图集&amp;自定义按钮&amp;切换按钮图片

1,准备素材新建一个文件夹,命名为UITexture. 2,创建Atlas在Project面板中,进入UITexture 文件夹,选中这两张图片,然后 右键-->[NGUI]-->[Atlas Maker],之后你会看到 Atlas Maker 的界面:在 Atlas Maker 界面中,点击[Create]按钮. 之后给这个Atlas 起名为MyAtlas.prefab,点击[保存]. 3,预览Atlas和Sprite保存之后,这个新的Atlas 就创建好了.可以点击一下[View Spri

Android自定义Viewgroup切换View带有吸附效果

1.概述 先上效果图 大概就是这个效果,先说说实现思路 1.首先我们要拿到图片的url(网络)或id.路径(本地),将View与数据进行绑定,写我们自己的Adapter 2.自定义Viewgroup将要显示的view进行布局,以及处理触摸事件进行逻辑处理 3.写切换回调 2.实现 1)自定义Adapter 这里我下载的网络图片,同样可以将图片放到res下设置ImageView的内容 public class DragPageViewAdapter { private static final S

iOS 自定义滑动切换TabbarItem 觉得设计丑也要做出来的UI效果。。。

UI丑却要继续做的感言: 对UI不满意的时候,就会觉得丑爆了,时间长了,却丑习惯了. 论前一阵子Tabbar 多丑,丑得最后不要tabbar了...但是自定义tabbar 和遇到的问题解决的过程可以记录一下 目标效果: 并有切换效果,但是并没说清楚,具体切换效果,比如粘滞,弹性? 于是我做了一个弹性的. 看实现效果 一. 原理: (1)普通切换选择效果,直接贴在了tabbar上,tabbar再自定义处理图层 (2)触发事件是tabbar上的,没有图片而已.这么处理也是取巧了,降低了整体自定义难度

[android] 练习样式主题自定义activity切换动画

主要练习了自定义样式和主题,继承android系统默认的样式并修改,练习xml定义淡入淡出动画 anim/fade_in.xml <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:from

ionic路由(页面切换)

ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态. • 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置 • 通过定义controller.template和view等属性,来定义指定位置的用户界面和界面行为 • 通过嵌套的方式来解决页面中的一些重复出现的部位 最简单的形式 模板可以通过下面这种最简单的方式来指定 <!-- in index.html --> // in app-states.js (or whatever you want t