ionic初步测试-listView效果

最新推荐文章于 2024-04-27 09:37:16 发布

静思行

最新推荐文章于 2024-04-27 09:37:16 发布

阅读量1k

点赞数

分类专栏： ionic 文章标签： webapp listView ionic

本文链接：https://blog.csdn.net/qq_14823401/article/details/49965179

版权

ionic 专栏收录该内容

2 篇文章 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>
效果如下: