博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
滑动吸顶效果
阅读量:7220 次
发布时间:2019-06-29

本文共 910 字,大约阅读时间需要 3 分钟。

最近在做一个项目,顶部titlebar,下方轮动banner(也就是普通的轮播图),底部通用的分类文章内容,滑动超过一定距离分类吸顶效果,类似于高德地图,搜索输入‘极客地图’效果;复制代码

滑动吸顶附带上拉加载更多效果,

  • 使用vue组件构成整体页面,顶部titlebar,中间轮播banner,底部iscroll滑动部分,滑动到吸顶的时候初始化底部iscroll,继而导致页面监听滑动失效;
  • 跳到二级页面回退iscroll失效,因为页面附带滑动下载更多,原生js实现问题比较多,继而想在iscroll的基础上进一步实现,如何有效的避免iscroll带来的诸多问题;

实现方式:

第一版

  • iscroll区域灰色选区域图标1,超过某些px元素图标1定位在某区域,整体banner固定不变,只是切换图标1位置;
  • 当元素低于某px之后图标1回归原位,效果生涩,页面原生scroll失效;

第二版

  • 整体页面iscroll,banner定位上层脱离iscroll容器区域,底部div套在banner底层占位置,scroll滑动的时候,最外层banner像层布改在滑动上方,效果差;

第三版

  • 滑动banner跟随页面滑动,超过区域显示图标1,并且隐藏iscroll容器内图标1真伪

解决方案

  • 首先整个页面当作iscroll容器,banner嵌套在iscroll容器内,监听scroll的scroll事件,this.y超过滑动区域显示吸顶元素,隐藏iscroll容器内红色标注部分,显示iscroll容器外的元素,因为iscroll区域内使用fixed定位不起作用

iscroll带来的问题

  • iscroll区域块之内的所有原生滑动被禁止;
  • 页面监听scroll事件失去作用;
  • 点击click报错,可以使用tab解决该问题,但是tap点击比较灵敏,会触发页面想不到的事件,

综上所述,出现了better-scroll插件来实现iscroll一些效果,该问题通过视觉效果隐藏banner,造成一种滑动区域在banner下面部分效果滑动;

转载于:https://juejin.im/post/5b2e0e7b51882574866d53a9

你可能感兴趣的文章
Android消息通知-Notification
查看>>
如何进行搜索
查看>>
【原】关于使用Sklearn进行数据预处理 —— 缺失值(Missing Value)处理
查看>>
android复习-AnsyTask
查看>>
JSP页面
查看>>
解决Android SDK Manager更新、下载速度慢
查看>>
LeetCode:Sort List
查看>>
Android ListView复制、删除的实现
查看>>
网络直播电视之M3U8解析篇 (下)
查看>>
Rational Rose2007无法正常启动解决方式
查看>>
“CoreCLR is now Open Source”阅读笔记
查看>>
用Visual C#来清空回收站(2)
查看>>
Yahoo团队总结的关于网站性能优化的经验(转)
查看>>
【转】10分钟搭建NDK的Android开发环境
查看>>
开涛spring3(3.4) - DI 之 3.4 Bean的作用域
查看>>
Flume Channel
查看>>
JS学习(二)
查看>>
Android 获取SDCard中某个目录下图片
查看>>
【Eclipse提高开发速度-插件篇】Eclipse插件安装慢得几个原因
查看>>
Jenkins学习五:更改Jenkins的主目录
查看>>