功能说明
当开发分类页面时,常见的效果如下:
当左侧一级分类被选择之后,右侧的二级分类向下滚动后,再次点击左侧一级分类进行分类切换,二级分类应该立刻恢复到顶部。
实现方案
首先,界面滚动的效果可以利用小程序中的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的值进行如下的设置:文章来源:https://www.toymoban.com/news/detail-507452.html
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模板网!