• 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>

    欢迎各位大虾指正
  • 相关阅读:
    [并发编程] 进程、线程
    100. 相同的树
    Python 问题集
    this关键字在函数中的应用
    去除列表右边框
    JS——作用域
    javascript——值传递!!
    null和undefined的区别?
    浏览器内核——四大主流
    http常用状态码
  • 原文地址:https://www.cnblogs.com/he-zhi/p/6847574.html
Copyright © 2020-2023  润新知