VUE2.0 实现移动端在固定区域内的滚动效果

2018-02-05 10:48:49来源:oschina作者:浅笑安然-rr人点击

分享

1.开发工具:微信web开发者工具;


2.项目:嵌在APP中的一个活动,活动是H5页面,使用VUE2.0框架。


3.需求,直接上截图:



item 上拉滚动到底部,遮罩层部分消失;item下拉,遮罩层部分显示。


4.代码:


HTML:


遮罩层部分与滚动区域部分是平级



CSS(重点):


.goods-area{
height:8.58rem;
overflow-x: hidden;/* 解决左右可以滑动的问题 */
overflow-y: auto;/* 解决左右可以滑动的问题 */
overflow-scrolling: touch; /*兼容性 ios5+、android4+ */
}

JS:


this.$refs.是VUE2.0新增的一个对象,不需要使用JS原生的获取DOM节点的方法,直接在元素上绑定ref,如上,

,然后再JS中直接调用 this.$refs.box 就可以直接获取。另外,感兴趣的小伙伴可以看一下,console.log(this.$refs.item)的结果。


回归本文主题,vue2.0 中的 mounted 方法,是页面加载后调用方法的地方。这还牵扯到另外一个问题就是VUE的钩子函数(后续工作中有了更深入的体会结合自己的实际项目再写一篇)。


页面加载后,监听滚动区域的 scroll 事件,调用 onScroll 方法,根据滚动的尺寸判断是否已经滚动到底部,控制遮罩层的显示和隐藏。


mounted () {
this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () {//onScroll方法放在methods:{}中
let nScrollHeight = this.$refs.box.scrollHeight;// 滚动距离总长 内部div的高度
let nScrollTop = this.$refs.box.scrollTop;// 滚动条(点)当前的位置在内部div的高度 里占多少
let itemHeight = nScrollHeight / (this.items.length);// 可以理解为每一个item的高度
let scrollLength = itemHeight * (this.items.length - 4);// 默认显示4个item
this.bottomMaskShow = true;
if (nScrollTop> (scrollLength -49)) {// 49这个差值比较灵活,是根据项目中打印出来的item高度和scrollTop实际滚动(出去)的值对比得出的
this.bottomMaskShow = false;
} else
if(nScrollTop <= (scrollLength -49)){
this.bottomMaskShow = true;
}
}

其实这个功能没有什么难点,但是自己在这个问题上纠缠了好长时间,在移动端的效果总是不理想,原因在于,在一开始自己就进入了一个误区,认为在微信的开发工具上打印出来的 scrollTop 跟手机上打印出来的是一样的,结果是,完全不一样,手机根据尺寸的大小scrollTop的值也是不一样的。


写在最后:


1.对于移动端的适配问题,灵活,以不变应万变;


2.遇到问题,想想那些点都是“你以为的”,可能就是这些“你以为的”出了问题;


写在最后的最后:


转行前端小白的第一篇博客,茫茫‘博’海中的一粟,不求能帮助他人,只为审查自身,记录,成长。


微信扫一扫

第七城市微信公众平台