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

这篇具有很好参考价值的文章主要介绍了小程序scroll-view组件纵向滚动返回顶部。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能说明

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

小程序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，但是视觉效果并不会有太多出入。文章来源地址https://www.toymoban.com/news/detail-507452.html

到了这里，关于小程序scroll-view组件纵向滚动返回顶部的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！