在做微信小程序的时候,常常会在类似如下的分类页面中使用的scroll-view组件:
但是会遇到一个小小的问题,就是在右侧详细商品页面滑到底部或者是非顶部的时候,你如果切换左边的tab栏,你会发现右边的页面显示的时候没有从顶部开始显示.
这时候就需要在 scroll-view 这个标签中使用 scroll-top="{{rightScrollTop}}"
Page({
data:{
// 左边分类的当前索引
activeIndex: 0,
// 用于右侧滚动到顶部的值,默认是0
rightScrollTop: 0
},
// 切换左侧tab栏的点击事件
changeTabIndex(e) {
// console.log(e);
const { index } = e.currentTarget.dataset;
this.setData({
activeIndex: index,
// 改变左侧选中的状态,根据索引值,获取左侧对应数据的孩子(就是显示在右侧的数据)
cateDataRight: this.cateAll[index].children,
rightScrollTop: 0
})
},
})
在切换左侧的 tab 分类(在本项目是 changeTabIndex 这个事件)的事件中,让 rightScrollTop 这个值等于0.
这样就可以解决这个小小的bug了.
-------来自一个前端菜鸟微信小程序开发过程中的小总结.