微信小程序中 scroll-view 组件小bug的解决

在做微信小程序的时候,常常会在类似如下的分类页面中使用的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了.

-------来自一个前端菜鸟微信小程序开发过程中的小总结.

原创文章 7 获赞 1 访问量 909

猜你喜欢

转载自blog.csdn.net/weixin_42559087/article/details/106163960