Ion-affix & Ion-stick 仿IOS悬浮列表插件
Ion-affix & Ion-stick 仿IOS悬浮列表插件
Ion-affix
1.相关网页
2.环境准备:
执行命令
bower install ion-affix
引用js
<script src="lib/ion-affix/ion-affix.js"></script>
3.使用
引用模块
angular.module('app', ['ionic', 'app.controllers','ion-aff'])
UI
<div class="list my-list">
<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list">group1</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
</div>
<div class="list my-list">
<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list" >group2</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
</div>
<div class="list my-list">
<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list" >group3</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
</div>
ion-affix 与 divider-list 实现 的 对比:
- divider-list
*item 全部都在同一个list 下, - Ion-affix
- 每一个有item-divider的部分为独立的一个list下,
- 通过
data-affix-within-parent-with-class
来指定一个class,标志其为同一个list
Ion-stick
相关网页
2.环境准备:
执行命令
bower install ion-sticky –save.
引用js
<script src="lib/ion-sticky/ion-sticky.js"></script>
3.使用
引用模块
angular.module('app', ['ionic', 'app.controllers','ion-sticky'])
UI
- 添加 ion-sticky
- 内层使用 divider-list
- 这里 item-divider 是在同一个一个list下
<ion-list ion-sticky>
<ion-item class="item-divider">group1</ion-item>
<ion-item>item1</ion-item>
<ion-item>item2</ion-item>
<ion-item>item3</ion-item>
<ion-item class="item-divider">group2</ion-item>
<ion-item>item1</ion-item>
<ion-item>item2</ion-item>
<ion-item>item3</ion-item>
<ion-item class="item-divider">group3</ion-item>
<ion-item>item1</ion-item>
<ion-item>item2</ion-item>
<ion-item>item3</ion-item>
</ion-list>
divider-list
<div class="list">
<div class="item item-divider">group1</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
<div class="item item-divider">group2</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
<div class="item item-divider">group3</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item3">item3</div>
</div>
Ion-affix & Ion-stick 仿IOS悬浮列表插件的更多相关文章
- jquery仿ios日期时间插件
Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...
- iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码
iOS精选源码 iOS WKWebView的使用源码 模仿apple music 小播放器的交互实现 高仿微信的悬浮小窗口 iOS仿支付宝首页效果 [swift]仿微信悬浮窗 类似于今日头条,网易新闻 ...
- Html - 仿Ios assistiveTouch 悬浮辅助球工具
仿Ios assistiveTouch 悬浮辅助球工具 <!DOCTYPE html> <html> <head> <meta charset="u ...
- vue 2 仿IOS 滚轮选择器 从入门到精通 (一)
大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...
- Android-PickerView【仿iOS的PickerView控件,并封装了时间选择和选项选择这两种选择器】使用
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...
- 动手分析安卓仿QQ联系人列表TreeView控件
因项目需要需要用到仿QQ联系人列表的控件样式,于是网上找到一个轮子(https://github.com/TealerProg/TreeView),工作完成现在简单分析一下这个源码. 一. 需要用 ...
- iOS: 属性列表介绍 Introduction to Property Lists
iOS: 属性列表介绍 Introduction to Property Lists 从本质上说, 属性列表就是苹果的对象数据序列化与反序列化方式 属性列表使用几种数据类型把数据组织为键值表和值表 P ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- WPF 自定义TreeView控件样式,仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...
随机推荐
- 【设计模式】单一职责原则(SRP)
单一职责原则是面向对象原则五大原则中最简单,也是最重要的一个原则, 他的字面定义如下: 单一职责原则(Single Responsibility Principle, SRP): 一个类只负责一个功能 ...
- 数据库安全性操作——操作原则及SQL注入
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6893134.html 今天在进行支付宝开发时,看到支付宝开发文档<开放平台第三方应用安全开发指南> ...
- 选择排序——Python实现
选择排序: 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小( ...
- Java中设计模式之单例设计模式-1
单例作用 1 节省内存 2 可以避免多种状态导致状态冲突 单例的创建步骤 1 私有化构造方法 2 私有化声明的属性 3 getInstance 4 方法需要静态 单例分类 1.懒汉式 2.饿汉式 两种 ...
- Implement a Linked List
https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Lin ...
- 如何编写Spring-Boot自动配置
摘要 本文主要介绍如何把一个spring的项目(特别是一些公共工具类项目),基于spring boot的自动配置的思想封装起来,使其他Spring-Boot项目引入后能够进行快速配置. AutoCon ...
- 剖析WPF数据绑定机制
引言 WPF框架采取的是MVVM模式,也就是数据驱动UI,UI控件(Controls)被严格地限制在表示层内,不会参与业务逻辑的处理,只是通过数据绑定(Data Binding)简单忠实地表达与之绑定 ...
- File字节流
1. File f = new File("文件路径") 注意:相对路径:非web项目的相对都是以项目为起点.(src/a/txt(建议) 绝对路径:f: ...
- 【麦克风阵列增强】Delay and sum beamforming
作者:桂. 时间:2017-06-03 15:40:33 链接:http://www.cnblogs.com/xingshansi/p/6937576.html 前言 本文主要记录麦克风阵列的几个基 ...
- git 知识点汇总
git commit git commit 命令执行后, git 主要执行了三个操作: 为每一个文件生成一个快照 每一个文件其实是真的数据, 所以 git 会把整个文件内容转成二进制, 然后经过压缩直 ...