【微信小程序】用scroll-view实现展开与收缩的效果,让ios和安卓统一的效果

前言

项目有一个功能,就是在页面上能够弹出一个分页加载的数据,滑到顶部时就收缩的容器。效果图如下:

效果图

效果图的关键功能点:能分页加载的半容器滑到顶部就收缩

既然半容器而且数据要分页加载,那就肯定要到scroll-view,用view不能实现上拉加载。利用scroll-view组件的bindscrolltoupper(用来实现滑到顶部就收缩的效果),bindscrolltolower(用来实现分页加载的功能),就这么愉快的开工~

开工后,就屁颠屁颠的向老大展示效果~

测试几回后,老大说Android和IOS不太一样诶,安卓有点怪的...哈?我测试对比后,发现安卓首先要上滑,再下滑就能收缩的。苹果直接下滑就能收缩的。然后老大说这安卓的用户体验不太好,最好直接下滑就收缩的,你再研究下吧~

WechatIMG38.jpeg

bindscrolltoupper用不了,那我用啥呢?诶,不是还有touchstart,touchmove,touchend?想了想,感觉这个可以呢,于是进行“手术”~

果然可以哈,但有点问题,就是滑的太快时,还没到顶部就收缩的,emmm,再看文档,发现事件对象有个target,官方文档说法是"触发事件的组件的一些属性值集合",就是说会记录下该组件的属性,比如距离top多远呢,就打印这个出来看看,果然有offsetTop(离外容器的顶部距离),用这个来判断,如果0,那就是到顶部了,然后就可以收缩的。为了体验好点的,我就用200来作为判断的条件。叨唠就到此了,该上代码了~

wxml:


  • Tip: isScroll必须要有的,因为收缩时会有滚动的现象
  • Tip: isShowMore: 要来切换数据列表和点击更多结果的显示

js:


wxss:


就这样了~这方案可能很小白的,如果有其他更好的方案,不妨提出来哈~小弟就是要向你们看齐的~

你可能感兴趣的:(【微信小程序】用scroll-view实现展开与收缩的效果,让ios和安卓统一的效果)