关闭

ionic初步测试-listView效果

标签: webapplistViewionic
586人阅读 评论(0) 收藏 举报
分类:

以下内容均基于ionic1.1版本(个人笔记)

由于最近公司需要,需在以后的开发中用到web+原生进行app应用开发,故了解了一下ionic的使用,闲话少说(这里就不进行介绍了,有强大的百度),第一次写,难免有错,望各位大侠指正。

 1、定义标题头部,也就是我们通常说的标题栏:

<div class="bar bar-header bar-energized ">
    <h1 class="title">标题</h1>
</div>
说明:
bar-energized 为库里面自带的,当前标题栏的背景颜色,其余还有几个

bar bar-header 这两个样式必须添加
2、定义内容:
<div class="scroll-content has-header has-footer overflow-scroll">
    <ul class="list">
        <li class="item" ng-repeat="item in items">{{item}}</li>
    </ul>
</div>
使用了angularjs加载数据
注意:
 has-header has-footer添加了这两个后content中的内容就只会出现在标题栏和底部导航栏的之间了,而不会是整个屏幕
overflow-scroll 数据太多时添加这个能使content中的内容可以滑动
完整代码如下:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../lib/ionic/css/ionic.min.css">
    <script src="../lib/ionic/js/ionic.bundle.min.js"></script>
    <title>demo1</title>
</head>
<body  ng-controller="myController">
   <div class="bar bar-header bar-energized ">
       <h1 class="title">标题</h1>
   </div>

    <div class="scroll-content has-header has-footer overflow-scroll">
        <ul class="list">
            <li class="item" ng-repeat="item in items">{{item}}</li>
        </ul>
    </div>

   <!--bar-assertive可以滑动-->
    <div class="bar bar-footer bar-assertive">
        <button class="button button-clear ion-android-star">Left</button>
        <div class="title ion-android-add">Title</div>
        <button class="button button-clear text-pulling">Right</button>
    </div>
</body>
</html>
<script>
    var ang = angular.module("myApp",[]);
    ang.controller("myController",function($scope){
        $scope.items = [];
        for(var i=0;i<20;i++){
            $scope.items.push("line"+i);
        }
    });
</script>
效果如下:

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1638次
    • 积分:66
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档