Ionic 顶部贴附效果的实现
来源:互联网 发布:pola护肤品怎么样知乎 编辑:程序博客网 时间:2024/04/29 04:57
当我们在实际应用开发中会遇到这样的一个问题:在我们进行页面滚动的时候需要将页面顶部或者页面中部的筛选栏不会随着内容的滚动而消失,而是当筛选栏的位置到达顶部的时候就固定在顶部,这样即使页面内容滚动到了底部,我们依旧可以点击处于页面顶部或中部的筛选栏进行筛选。为了解决这样的问题,我们可以采用ion-affix和ion-sticky的方法对它进行贴附。
方法一:ion-affix(只适用于ios设备,在安卓上无法使用)
首先我们需要在index.html中引入
<script src="http://www.aliok.com.tr/post-assets/code/ion-affix-1.0.1/ion-affix.js"></script>
然后在angular.module(‘demo’, [‘ionic’, ‘ion-affix’]);中注入ion-affix
按照以下方式进行操作
<ion-content scroll-event-interval="5"> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <p>页面上部内容</p> <div class="afix"> <div ion-affix data-affix-within-parent-with-class="afix"> <div class="row stable-bg"> <div class="col col-25 text-center">种类</div> <div class="col col-25 text-center">价格</div> <div class="col col-25 text-center">销量</div> <div class="col col-25 text-center">评价</div> </div> </div> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面下部内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> <p>页面内容</p> </div></ion-content>
注意在ion-content 需要加入scroll-event-interval这是滚动的间隔时间,然后将筛选栏以下的内容写在一个div中并且给这个div一个类名,然后设定一个需要贴附的筛选栏的div,
并给这个div加上ion-affix data-affix-within-parent-with-class这里的类名要与上层div类名一致。这样当页面滚动到筛选栏的位置的时候,该筛选栏就会固定在顶部而不会因为滚动而消失。
方法二:ion-sticky
首先使用boewr安装ion-sticky
bower install ion-sticky –save
然后在index.html中引入下载下来的ion-sticky.js,并在module中注入‘ion-sticky’
<script src="lib/ion-sticky/ion-sticky.js"></script>
然后按照以下方式操作:
<ion-content ion-sticky> <ion-list> <ion-item class="item-divider"> A </ion-item> <ion-item> A1 </ion-item> <ion-item> A2 </ion-item> <ion-item> A3 </ion-item> <ion-item> A4 </ion-item> <ion-item> A5 </ion-item> <ion-item> A6 </ion-item> <ion-item> A7 </ion-item> <ion-item> A8 </ion-item> <ion-item class="item-divider"> B </ion-item> <ion-item> B1 </ion-item> <ion-item> B2 </ion-item> <ion-item> B3 </ion-item> <ion-item> B4 </ion-item> <ion-item> B5 </ion-item> <ion-item> B6 </ion-item> <ion-item> B7 </ion-item> <ion-item> B8 </ion-item> <ion-item class="item-divider"> C </ion-item> <ion-item> C1 </ion-item> <ion-item> C2 </ion-item> <ion-item> C3 </ion-item> <ion-item> C4 </ion-item> <ion-item> C5 </ion-item> <ion-item> C6 </ion-item> <ion-item> C7 </ion-item> <ion-item> C8 </ion-item> <ion-item class="item-divider"> D </ion-item> <ion-item> D1 </ion-item> <ion-item> D2 </ion-item> <ion-item> D3 </ion-item> <ion-item> D4 </ion-item> <ion-item> D5 </ion-item> <ion-item> D6 </ion-item> <ion-item> D7 </ion-item> <ion-item> D8 </ion-item> <ion-item class="item-divider"> E </ion-item> <ion-item> E1 </ion-item> <ion-item> E2 </ion-item> <ion-item> E3 </ion-item> <ion-item> E4 </ion-item> <ion-item> E5 </ion-item> <ion-item> E6 </ion-item> <ion-item> E7 </ion-item> <ion-item> E8 </ion-item> <ion-item class="item-divider"> F </ion-item> <ion-item> F1 </ion-item> <ion-item> F2 </ion-item> <ion-item> F3 </ion-item> <ion-item> F4 </ion-item> <ion-item> F5 </ion-item> <ion-item> F6 </ion-item> <ion-item> F7 </ion-item> <ion-item> F8 </ion-item> </ion-list></ion-content>
这样的方式是根据item-divider这个类来找到需要贴附的地区的,如果有需要可以更改ion-sticky.js中的代码。
效果图如下:
- Ionic 顶部贴附效果的实现
- ionic-基于angularjs实现沉浸式顶部导航栏,滚动时产生渐变效果
- ionic实现侧滑的效果
- JavaScript回到顶部的滑动效果实现
- javascript 回到顶部的效果实现
- CSS实现网页顶部的阴影效果
- 如何实现“返回顶部”的页面效果
- 返回顶部效果的代码实现
- ionic实现轮播图效果
- “回到顶部”-带缓动效果,附JS源码
- 仿网易官网顶部展出的大幅广告代码,附效果演示
- [微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
- ionic-基于angularjs实现固定顶部的可循环滚动文字的通知banner
- AngularJS中手机移动端滑屏效果的实现(ionic)
- 实现类似网易邮箱的顶部工具栏的悬停效果
- javascript实现拖到到顶部效果
- jquery实现返回顶部效果
- js实现回到顶部效果
- 关于DOM的几个知识点
- HDU 1255 覆盖的面积 (线段树扫描线+面积交)
- 人物鼠标点击控制以及摄像机跟随
- iOS多语言工具推荐
- 【JZOJ4715】【NOIP2016提高A组模拟8.19】树上路径
- Ionic 顶部贴附效果的实现
- linux和windows上安装git
- [html] 语法
- 关于移位运算符的那些事
- 2016.09.01 69.9kg WTF
- lucence 概念(二)
- Get技能---如何压缩图片文件大小不失真
- 大数据环境基础之Centos安装Haoop集群(2)在CentOS上安装jdk
- ArcGIS10.2下载安装 License Manager、ArcGIS Desktop、ArcGIS Server软件下载及破解