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>

    欢迎各位大虾指正
  • 相关阅读:
    C指针详解(经典,非常详细)
    PL/SQL错误提示 database character set(AL32UTF8) and Client character set(ZHS16GBK) are different
    安装Oracle报错,全部为未知!
    Oracle 支持在具有 DHCP 分配的 IP 地址的系统上进行安装
    Asp.Net页面生命周期
    oracle 导库建立测试库
    宝塔安装建站教程
    SEM理论
    SEM小总结
    SEM大致操作梳理
  • 原文地址:https://www.cnblogs.com/he-zhi/p/6847574.html
Copyright © 2011-2022 走看看