zoukankan      html  css  js  c++  java
  • ionic 最简单的路由形式,头部固定,下面tab切换-------一个简单的单页切换起飞了

    <ion-header-bar class="bar-dark" align-title="left">
    <h1 class="title" >微信 </h1>
    <span class="button button-clear">
    <i class="icon ion-plus padding-right"></i>
    <i class="icon ion-search padding-left"></i>
    </span>


    </ion-header-bar>
    <ion-tabs class="tabs-positive tabs-striped tabs-bottom tabs-icon-top">
    <ion-tab title="微信" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <ion-view>
    <ion-content class="calm-bg">
    <ul class="list">
    <li class="item item-avatar-left" ng-repeat="item in items">
    <img src="wxl.jpg" style="height: 40px; 40px;"/>
    <h2 class="list-inset">忙里偷闲</h2>
    <p class="padding-top">{{item}}你在忙什么啊,稍后回复您的消息</p>
    <h3 class="badge">{{ date | date : 'a h:mm' }}</h3>
    </li>
    </ul>
    </ion-content>
    </ion-view>
    </ion-tab>
    <ion-tab title="通讯录">
    <ion-view>
    <ion-content class="bar-dark">
    <ul class="list">
    <li class="item item-avatar-left" ng-repeat="item in items">
    <img src="wxl.jpg" style="height: 40px; 40px;"/>
    <p class="padding-top">{{item}}你在忙什么啊,稍后回复您的消息</p>

    </li>
    </ul>
    </ion-content>
    </ion-view>
    </ion-tab>
    <ion-tab title="发现">
    <ion-view>
    <ion-content class="bar-dark">
    内容三
    </ion-content>
    </ion-view>
    </ion-tab>
    <ion-tab title="我">
    <ion-view>
    <ion-content class="bar-dark">
    内容四
    </ion-content>
    </ion-view>
    </ion-tab>
    </ion-tabs>

    欢迎各位大虾指正
  • 相关阅读:
    Java学习----不变的常量
    Java学习----Java数据类型
    Java学习----Java程序结构
    Java学习----main详解
    (转)你知道Android也有安全模式吗?(地球人都知道了吧)
    Android学习----打印日志Log
    Android学习----五大布局
    Android学习-----Button点击事件几种写法
    mysql建立索引 删除索引
    MySQL查看SQL语句执行效率
  • 原文地址:https://www.cnblogs.com/he-zhi/p/6847574.html
Copyright © 2011-2022 走看看