Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

Ionic开发入门教程_6

$
0
0

创建模版

  今天周五,没有太多事情,索性再来一篇~
  原文链接:http://ccoenraets.github.io/ionic-tutorial/create-ionic-template.html
  
这里写图片描述

第六章 创建模版

  在这一章节中,你将来创建两个模版:sessions.html来展示会议列表,session.html来展示一个特定会议的具体细节。

步骤1:创建Sessions模版


1、在conference/www/templates目录中,将palylists.html重命名为sessions.html

2、按照如下代码实现sessions.html模版:

<ion-view view-title="Sessions">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="session in sessions"
                href="#/app/sessions/{{session.id}}">{{session.title}}</ion-item>
    </ion-list>
  </ion-content>
</ion-view>

注意:这里使用了ng-repeat指令来展示会议列表

步骤2: 创建session模版


1、将playlist.html重命名为session.html

2、按照如下代码实现session.html模版:

<ion-view view-title="Session">
  <ion-content>
    <div class="list card">
      <div class="item">
        <h3>{{session.time}}</h3>
        <h2>{{session.title}}</h2>
        <p>{{session.speaker}}</p>
      </div>
      <div class="item item-body">
        <p>{{session.description}}</p>
      </div>
      <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item">
          <i class="icon ion-thumbsup"></i>
          Like
        </a>
        <a class="tab-item">
          <i class="icon ion-chatbox"></i>
          Comment
        </a>
        <a class="tab-item">
          <i class="icon ion-share"></i>
          Share
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>
作者:suqingheangle 发表于2016/11/18 18:35:19 原文链接
阅读:54 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>