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>
效果如下:

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

在listview嵌套listview 并且想实现点击其中一个item隐藏item的内容

首先定义一个arrayList ArrayList showChildFlag = new ArrayList(); public static boolean mbShowChild ...

PullToRefreshListView 应用讲解

原文地址 PullToRefreshListView 用法和ListView 没有什么区别  listview能用的属性 pulltorefresh也能用 我一直认为动手是最好的学习方法....

ionic2 使用slides制作滑动效果的类型选择栏

类似的效果如下图: 1. 生成一个component ionic g component MySlide 2. 在my-slide.html中添加代码: {{s...

Ionic3 自定义组件实现图片懒加载效果

在使用ionic3的过程中,我们可以使用angularjs的组件特性进行组件的自定义开发,对一些特定条件下的需求开发对应的组件。下面我们就通过自定义组件来实现图片的懒加载效果。当我们需要加载的图片很大...

Ionic 顶部贴附效果的实现

当我们在实际应用开发中会遇到这样的一个问题:在我们进行页面滚动的时候需要将页面顶部或者页面中部的筛选栏不会随着内容的滚动而消失,而是当筛选栏的位置到达顶部的时候就固定在顶部,这样即使页面内容滚动到了底...

ionic的切换效果实现——以登录页密码显示隐藏切换为例

在项目中常常会用到切换效果,以登录页的密码输入框的密码显示隐藏为例: 切换实现如下:css:password { background-color: transparent; dis...

ionic-toast 淡入淡出效果

最近在做ionic项目,引入了ionic-toast插件后,发现无法实现淡入淡出效果,很生硬的block,none  所以抽出时间,修改了ionic-toast的js文件,本人菜鸟,大神误喷...

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

在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果: 代码如下: html: 1.我是第1行 2.我是第2行

ionic 在mac上的环境搭建以及在iOS模拟器上测试

ionic 在mac上的环境搭建以及在iOS模拟器上测试1.下载并安装nodejs ,这个不用多说,直接装就行了2. npm install -g cordova ionic //(安装 ionic以...

Ionic2跨平台项目(四)热修复(本地测试)

一、技术背景 本文主要探讨github一个有名的插件:cordova-hot-code-push,其用于实现cordova项目热修复,具体做法在github上写的很清楚,本文主要简单介绍一下用法和其在...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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