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

angularjs和ionic性能优化(2)

angular 性能优化 使用$watchCollection(obj, listener), 不要使用$watch()或者$watchGroup(); 使用one-time binding{{::...

ionic中文详解CSS组件(2)

接着上一篇ionic中文详解CSS组件(1),我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅。另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇io...

ionic:css实现带字的滑动 toggle

由于项目中需要带字的toggle滑动组件,而ionic提供的是这样的: 实际项目中需要这样子的: 在网上找了下其他的实现,感觉没得类似的,也没发现合适的,于是自己试着定义了一个凑合着用。先上效...

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

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

Ionic 顶部贴附效果的实现

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

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

类似的效果如下图: 1. 生成一个component ionic g component MySlide 2. 在my-slide.html中添加代码: {{s...
  • malonely
  • malonely
  • 2016年09月12日 14:22
  • 10455

ionic的侧滑和下拉刷新效果

一,侧滑效果 主要涉及到三个地方 1,菜单页面 主要分为主页面和侧滑页面两部分,又分别都包含顶部bar和主要内容部分 注意:主页面内容部分,关键的菜单内容name要对应到是菜单内容的页面(在app.j...

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

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

ionic上拉下拉效果应用

1、下拉更新数据 : ion-refresher使用指令 ion-refresher 可以为滚动容器( ion-scroll 或 ion-content)增加 拉动刷新的功能: ion-refr...

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

在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果: 代码如下: html: 1.我是第1行 2.我是第2行...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic初步测试-listView效果
举报原因:
原因补充:

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