ionic初步测试-listView效果

来源：互联网发布：账户数据库设计编辑：程序博客网时间：2024/04/29 23:03

以下内容均基于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