最近在写skyline的项目 就类似写商城之类的页面布局 左边为商品分类栏 右边为商品栏(下图拿官方的skyline模版举例)
想达到的效果就是用户滑动右方商品栏到下一个分类 左侧商品分类栏会随着改变到下一个分类
以前用webview写的话就是用 createSelectorQuery()配合scroll-view解决 先createSelectorQuery()算出每个分类的高度 然后scroll-view的bindscroll返回的高度判断现在滑到哪个分类 然后改变左侧商品分类栏
现在skyline写的话想到了两个方案
1)沿用createSelectorQuery()配合scroll-view
2)sticky-header的bind:stickontopchange
用1的话 发现createSelectorQuery()返回的数值不准确且偏差很离谱 可能跟skyline list-view和grid-view这些东西不在页面内不渲染有关吧 反正最后各种尝试后还是解决不了问题 放弃了
用2的话 根据sticky-header的bind:stickontopchange回调很清楚的知道用户滑动右方商品到了哪个商品分类 模拟器出来的效果堪称完美比方法1更无脑更简单 真机上测试直接劝退 bind:stickontopchange在真机上只会触发一次 就是你从最上滑动到最下 左边商品分类会改动 但是也只限这一次了 后面的任何滑动也不会再有任何回调了 官方也知道问题 但就是没改过来 也放弃了
想问问现在在用skyline写项目的大神 有遇到类似的情况吗?这种布局你们是怎么解决的?
用`IntersectionObserver`,右侧列表最底下放一个1px高度的placeholder就行,不要每个商品卡片都用