小程序商品多级分类的联动效果

小程序商品多级分类的联动效果

商城类小程序都有一个商品分类查询页面，有的是左右布局的一级分类、有的是上下+左右布局的二级分类、还有的在商品列表再增加一级分类的三级分类页面。为了分类页面的用户体验，常常需要做联动，让用户在滚动页面的时候，有畅快淋漓的丝滑体验。

需求

1. 滚动商品列表到顶或者到底后，继续滚动可以切换到下一个分类
2. 点击分类时能将分类移动到剧中位置
   以上需求都需要对scroll-view进行滚动操作。

scroll-info-view

首先想到通过响应式设置scroll-info-view来进行滚动，但是发现有两个问题：

1. 如果子几点是通过slot动态插入的，泽无法进行滚动。
2. 通过scroll-info-view进行的滚动，只能将子节点滚动到顶或者左的位置，无法滚动到居中的位置。

scroll-left/top

参考B站tpframe老师的课程

需要通过响应式修改scroll-left/top属性来实现。步骤如下：
1.为scroll-view添加相关属性

<scroll-view class="sidebar" scroll-with-animation scroll-top="{{scrollTop}}" scroll-y>
  <slot />
</scroll-view>

2.获取scroll-view组件的可视区域高度/宽度
确保在页面渲染后进行查询，我是放在设置当前分类的observer中获取

wx.createSelectorQuery()
      .in(this)
      .select('.sidebar')
      .boundingClientRect((rect) => {
        if(rect)this.scrollHeight = rect.height;
      }).exec()

3.获取子节点的可视区域高度/宽度
由于子节点是分装的组件，所以在ready函数中获取，并通过从relations获取到的父组件传给scroll-view

lifetimes: {
    ready: function(){
      const { parent } = this;
      // 获取分类项控件的宽度
      wx.createSelectorQuery()
      .in(this)
      .select('.sidebar-item-container')
      .boundingClientRect((rect) => {
        parent.scrollItemHeight = rect.height;
      }).exec()
    }
  },

4.计算滚动距离
根据视频中的介绍，居中的滚动位置为：
(子节点可视高度/宽度的一半 + 子节点前的所有兄弟节点可视高度/宽度) - scroll-view可视高度/宽度的一半

this.setData({
        scrollTop: this.scrollItemHeight/2 + this.scrollItemHeight*newVal - this.scrollHeight/2,
      })