作者:布尔熊 | 来源:互联网 | 2023-05-16 20:46
马上要给伟大的祖国母亲庆生了,也没有什么心情工作了,O(∩_∩)O哈哈~简单整理下这两天研究的东西,小弟学识浅薄,只是实现了效果,不知道还有没有其他的办法。最近项目需求,简单实现了下ion-l
马上要给伟大的祖国母亲庆生了,也没有什么心情工作了,O(∩_∩)O哈哈~ 简单整理下这两天研究的东西,小弟学识浅薄,只是实现了效果,不知道还有没有其他的办法。
最近项目需求,简单实现了下ion-list上拉时将页面全屏显示,下拉恢复(也可以在上拉到顶部时恢复)。
因为页面需要在列表处可以进行拖拽,前期做这个项目的时候也是刚刚接触phonegap,就把ion-content放在了对应列表的地方,在上部就用div来显示一些信息。
不方便上源码,这里简单写一下吧, 纯手写啊。。。
html:
<div style="width:100%;" ng-class="{true:'detection-info-hide',false:'detection-info-show'}[detection_info_is_show]">
<div style="overflow:hidden;">
div>
div>
<ion-content style="margin-top:220px;" ng-class="{true:'list-margin-sub',false:'list-margin-add'}[detection_info_is_show]">
<ion-list ng-repeat="..." on-swipe-up="swipeUp()" on-swipe-down="swipeDown()" on-drag-up="swipeUp()" on-drag-down="swipeDown()">
<div>
div>
ion-list>
ion-content>
css 命名简单命名的,不要介意:
.detection-info-hide{
-webkit-animation:myfirst 0.5s;
animation-fill-mode:forwards;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
height: 137px;}
to {
height: 0px;}
}
.detection-info-show{
-webkit-animation:mysecond 0.5s;
animation-fill-mode:forwards;
}
@-webkit-keyframes mysecond /* Safari and Chrome */
{
from {
height: 0px;}
to {
height: 137px;}
}
.list-margin-sub {
-webkit-animation: list-margin-sub-sub 0.5s;
animation-fill-mode:forwards;
}
@-webkit-keyframes list-margin-sub-sub {
from {
margin-top: 220px;}
to {
margin-top: 83px;}
}
.list-margin-add {
-webkit-animation: list-margin-add-add 0.5s;
animation-fill-mode:forwards;
}
@-webkit-keyframes list-margin-add-add {
from {
margin-top: 83px;}
to {
margin-top: 220px;}
}
js:
$scope.swipeUp = function(){
if(!$scope.has_excange_above){
if($ionicScrollDelegate.getScrollView().getScrollMax().top > $ionicScrollDelegate.getScrollPosition().top){
$scope.detection_info_is_show = true;
$scope.scrollHeight = false;
$scope.has_excange_above = true;
$scope.has_excange_bottom = false;
$timeout(function(){$ionicScrollDelegate.resize()},550);
}
}
}
$scope.swipeDown = function(){
if(!$scope.has_excange_bottom){
$scope.detection_info_is_show = false;
$scope.scrollHeight = true;
$scope.has_excange_above = false;
$scope.has_excange_bottom = true;
}
}
大概就是上面的代码啦
实现的思路就是捕获angularjs的上拉、下拉、上滑、下滑事件,在这个事件上将咱们的样式添加上。
实现起来有个问题,当快速上拉时,ion-list 生成的会脱离底部,慢慢拉的话没有这个问题。所以就在js里面加了一个resize,用来重新计算大小,别忘了添加$ionicScrollDelegate依赖。
PS:上面这个问题感觉没用太好,不知道是否有高人指点一二。小弟感激不尽。
另外,感觉这个效果不是很好,模仿淘宝的app做的,觉得可以在上拉的时候控制list不滚动,只做全屏操作,当全屏后,再上拉,list再跟着动,但是没有实现,思路是想拦截list的滚动事件,但是看源码好像是设置是否滚动后就不能改变了,再次请高人指点。
告退~准备放假了 祝祖国生日快乐
推荐阅读
-
本文介绍了H5游戏性能优化和调试技巧,包括从问题表象出发进行优化、排除外部问题导致的卡顿、帧率设定、减少drawcall的方法、UI优化和图集渲染等八个理念。对于游戏程序员来说,解决游戏性能问题是一个关键的任务,本文提供了一些有用的参考价值。摘要长度为183字。 ...
[详细]
蜡笔小新 2023-12-10 15:40:37
-
在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ...
[详细]
蜡笔小新 2023-12-14 17:34:00
-
-
本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ...
[详细]
蜡笔小新 2023-12-14 18:45:00
-
最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
-
本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ...
[详细]
蜡笔小新 2023-12-14 14:15:30
-
蜡笔小新 2023-12-13 11:03:10
-
本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ...
[详细]
蜡笔小新 2023-12-12 13:16:49
-
本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ...
[详细]
蜡笔小新 2023-12-11 15:10:15
-
本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ...
[详细]
蜡笔小新 2023-12-11 12:42:44
-
本文是一篇翻译文章,介绍了async/await的用法和特点。async关键字被放置在函数前面,意味着该函数总是返回一个promise。文章还提到了可以显式返回一个promise的方法。该特性使得async/await更易于理解和使用。本文还提到了一些可能的错误,并希望读者能够指正。 ...
[详细]
蜡笔小新 2023-12-09 17:22:06
-
本文介绍了CSS样式属性text-overflow、overflow、white-space、width的使用方法和效果。通过设置这些属性,可以实现文本溢出省略号、隐藏溢出内容、禁止换行以及限制元素宽度等效果。详细讲解了每个属性的作用和用法,以及常见的应用场景和注意事项。对于前端开发者来说,掌握这些CSS样式属性的使用方法,能够更好地实现页面布局和文本显示效果。 ...
[详细]
蜡笔小新 2023-12-09 08:49:24
-
本文整理了Java中org.apache.solr.common.SolrDocument.setField()方法的一些代码示例,展示了SolrDocum ...
[详细]
蜡笔小新 2023-12-09 06:54:05
-
vb.net面试题,请大家帮忙,谢谢。如果需要讲详细一点,那就加我QQ531412815第4题,潜在的错误,这里的错误不是常规错误,属于那种只有在运行是才知道的错误:Catchex ...
[详细]
蜡笔小新 2023-10-17 12:43:37
-
一、实验目标绘制PyQT界面,调用摄像头显示人脸信息。在界面中,用户通过点击不同的按键可以实现多种功能:打开和关闭摄像头, ...
[详细]
蜡笔小新 2023-10-17 12:37:18
-