ionic初步测试-listView效果

原创 2015年11月21日 16:02:31

以下内容均基于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>
效果如下:

ionic使用记录----列表.list

列表 : .list 列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器,使用.item定义列表成员: class="list"> class="item">... ...
  • mainpro126
  • mainpro126
  • 2015年06月05日 14:43
  • 998

使用ionic在首页新闻中应用到的跑马灯效果的实现

在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果: 代码如下: html: 1.我是第1行 2.我是第2行...
  • zuoyiran520081
  • zuoyiran520081
  • 2017年02月13日 15:21
  • 1110

ionic初步测试-listView效果

以下内容均基于ionic1.1版本(个人笔记) 由于最近公司需要,需在以后的开发中用到web+原生进行app应用开发,故了解了一下ionic的使用,闲话少说(这里就不进行介绍了,有强大的百度),第一次...
  • qq_14823401
  • qq_14823401
  • 2015年11月21日 16:02
  • 734

Ionic单元测试(Unit Tests)

代码测试的必要性,对任何编程语言都毋需赘述,JavaScript和HTML自然不例外。本文描述如何对Ionic/Angular进行单元测试(Unit Tests)及端对端(End to End Tes...
  • u010730126
  • u010730126
  • 2016年04月07日 12:11
  • 1468

Android 实现ListView的弹性效果

关于在Android中实现ListView的弹性效果,有很多不同的方法,网上一搜,也有很多,下面贴出在项目中经常用到的两种实现ListView弹性效果的方法(基本上拿来就可以用),供大家参考:    ...
  • eastman520
  • eastman520
  • 2014年02月10日 17:24
  • 8200

Ionic基础——列表ion-list

一.列表 : ion-list    列表是常用的信息组织方式。在ionic中,使用ion-list指令声明列表 元素,使用ion-item指令声明成员元素: ... ... ...
  • bboyjoe
  • bboyjoe
  • 2016年02月18日 11:45
  • 8673

ionic2 之 List

List 标签例子如下:
  • yanyanforest
  • yanyanforest
  • 2017年09月05日 17:08
  • 317

Android中ListView的各种显示效果

在android应用开发中,ListView是使用频率非常高的一个组件,基本上稍微复杂点的布局都会用到它,利用它可以让你的界面美观,有层次 。ListView可以用来作为数据显示的容器,也可以作为界...
  • Buaaroid
  • Buaaroid
  • 2014年05月29日 10:39
  • 2245

Android ListView按下效果显示问题

一般来说Android listview每个item的按下效果,只要设置background就可以,但是今天遇到一个小问题,点击的时候需要长按才能有效果,最后发现是因为item里面有button,所以...
  • u010494578
  • u010494578
  • 2014年12月02日 16:27
  • 952

ionic开发——完整搜索功能的实现方法

本文主要实现搜索功能及清空搜索内容的实现方法。 在angularjs中,我们的列表基本都是遍历的一个对象数组来显示出来的,那么我们的搜索功能也就在这个基础上来实现。 那就假设我们有一个事先显示...
  • yu17310133443
  • yu17310133443
  • 2016年09月20日 14:49
  • 5910
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic初步测试-listView效果
举报原因:
原因补充:

(最多只允许输入30个字)