小程序scroll-view组件纵向滚动返回顶部

功能说明

当开发分类页面时，常见的效果如下：

当左侧一级分类被选择之后，右侧的二级分类向下滚动后，再次点击左侧一级分类进行分类切换，二级分类应该立刻恢复到顶部。

实现方案

首先，界面滚动的效果可以利用小程序中的scroll-view组件来实现，例如：

<scroll-view class="left-scroll-view" scroll-y >
   <block v-for="(item, i) in cateList" :key="i">
     <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
       {{item.cat_name}}
     </view>
   </block>
 </scroll-view>

在确定了基本的布局后，就可以来实现切换一级分类时二级分类区域滚动条恢复到顶部的效果 。

首先在data中创建scrollTop属性，值为0。

data() {
  return {
     scrollTop: 0
   };
 },

其次将data中的scrollTop动态绑定到二级分类的scroll-view组件上的scroll-top属性上。

<scroll-view class="right-scroll-view" scroll-y  :scroll-top="scrollTop">
</scroll-view>

当点击左侧一级菜单时，在监听的单击事件的事件处理函数中，将scrollTop的值进行如下的设置：

this.scrollTop = this.scrollTop === 0 ? 1 : 0

为什么要设置为0 或者1，是因为scroll-view组件的scroll-top属性值如果第一次和第二次赋值相同，则会没有效果。所以这里设置为0或者1，保证每次赋值并不相同，虽然值并不是0，但是视觉效果并不会有太多出入。