微信小程序中 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了.

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值