这里有新鲜出炉的精品教程,程序狗速度看过来!
ionic 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架。
这篇文章主要为大家详细介绍了 ionic 实现可滑动的 tab 选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
利用 ionic 的 slide-box 组件实现可滑动的 tab,主要是监听 tab 点击以及 slide 页面滑动的事件,做相应的处理,用 ng-repeat 循环,优化、简略了代码,有需要的同学可以看看。
先来张效果图:
用到的 CSS 代码:
- .tab_default {
- border - bottom: solid 1px#F2F2F2;
- padding: 6px 0;
- }.tab_select {
- border - bottom: solid 1px#3E89F5;
- box - shadow: 0 - 3px 8px#C1D3F0 inset;
- }.arrow - top {
- position: absolute;
- width: 0;
- height: 0;
- top: 20px;
- border: 6px solid#3E89F5;
- border - right - color: transparent;
- border - left - color: transparent;
- border - top - color: transparent;
- }.arrow - top: after {
- content: '';
- position: absolute;
- width: 0;
- height: 0;
- border: 12px solid#fff;
- right: -12px;
- bottom: -13px;
- border - right - color: transparent;
- border - left - color: transparent;
- border - top - color: transparent;
- }
页面上 html 代码:
- <ion-view view-title="滑动tab">
- <ion-content has-bouncing="false">
- <div style="display:flex;width:100%;">
- <div style="flex:1;text-align: center;" class="tab_default" ng-repeat="d in tabNames"
- ng-click="activeSlide($index)" ng-class="slectIndex==$index ? 'tab_select' : '' ">
- {{d}}
- <div class="arrow-top" style="left:{{15+$index*33}}%" ng-show="slectIndex==$index">
- </div>
- </div>
- </div>
- <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex"
- does-continue="false" show-pager="false">
- <ion-slide ng-repeat="p in pages">
- <div ng-include="p">
- </div>
- </ion-slide>
- </ion-slide-box>
- </ion-content>
- </ion-view>
对应的 controller.js 代码:
- $scope.tabNames = ['java', 'html5', 'android'];
- $scope.slectIndex = 0;
- $scope.activeSlide = function(index) { //点击时候触发
- $scope.slectIndex = index;
- $ionicSlideBoxDelegate.slide(index);
- };
- $scope.slideChanged = function(index) { //滑动时候触发
- $scope.slectIndex = index;
- };
- $scope.pages = ["templates/tab01.html", "templates/tab02.html", "templates/tab03.html"];
tab01.html、tab02.html、tab03.html 这几个都是差不多的,贴一个 tab01 的:
- <div style="width:100%;text-align: center;padding-top:30px;">
- page 01
- <p style="margin-top:30px;">
- <img src="img/tab01.jpg" style="width:100%;" />
- </p>
- </div>
注意点:
• 点击时候将当前循环的索引 $index 赋值给变量 slideIndex,在 tab 中使用 ng-class 判断点击时候的索引和 slideIndex 是否一样,一样则改变相应的 tab 的样式;
• 滑动的时候是用的 slide-box 的一个函数,on-slide-changed,当 slide 页面发发生变化的时候,会向改函数传递一个变量 index 标识当前 slide 的索引 ;
• 如果不想滚动只点击,可以去掉 on-slide-changed 的监听,也可以增加一个属性,disable-scroll="true",禁止 slide page 滚动;
来源: http://www.phperz.com/article/17/0711/332284.html