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

   日期:2020-05-17     浏览:144    评论:0    
核心提示:在做微信小程序的时候,常常会在类似如下的分类页面中使用的scroll-view组件:但是会遇到一个小小的问题,就是在右侧详细商品页面滑到底部或者是非顶部的时候,你如果切换左边的tab栏,你会发现右边的页面显示的时候没有从顶部开始显示.这时候就需要在 scroll-view 这个标签中使用 scroll-top={{rightScrollTop}}Page({ data:{ // 左边分类的当前索引 activeIndex: 0, // 用于右侧滚动到顶部的值,默认是0前端

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

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

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服