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

这篇具有很好参考价值的文章主要介绍了小程序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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包