评论

小程序- SaUi 之tab的完善

SaUi-----tab组件的完善

距离上次更新已经是一个星期前了,在这段时间里,只要我闲下来,都在折腾我最新更新的功能tab组件的完善,虽然说还不是百分之百分的完美,但是80分总有的吧…

先说下我这次更新的功能
1 滚动切换标题,并监控标题是否超过屏幕显示的范围使其滚动到屏幕内(tab组件)
2 点击标题内容滚动到相应的位置,并监控标题是否超过屏幕显示的范围使其滚动到屏幕内(tab组件)(tab组件)
3 小程序识别不了普通的二维码,但是支持赞赏码,页面放在我的页面,大家可以试试~~~~~~~

遗留个问题,因为是滚动到指定的节点才去更新标题栏的状态,所以滚动快的时候,标题栏会慢一点,待解决…

最后,我想吐槽吐槽关于tab实现过程中我遇到的坑…

首先,组件内容是获取不到wx.createSelectorQuery()的,查了文档后说添加in(this),可是可是…大家有遇到有添加了这个也没用的问题么!!返回是null…后面的后面才发现,如果是组件套组件的话,需要跨自定义组件的后代选择器:select(’.the-ancestor >>> .the-descendant’).boundingClientRec(),一定要用上的……好吧,说起来好像又好简单~。
贴上部分代码

created: function () {
	this.query = wx.createSelectorQuery().in(this)      //获取节点需要的
},
ready: function() {
	let $contentQuery = []
	for(let i = 0; i < ds.data.length; i++) {
		this.query.select(''.tab-container >>> #tabs-+i).boundingClientRect()
	}
	this.query.exec(function (res) {
		$contentQuery = res
	})

	setTimeout(() => {		//$contentQuery 会比exec()先执行,如果不定时,有可能会取不到值.......
		this.getValue = $contentQuery
	}, 100);
}

获取到节点后,剩下的就是大量的计算了,比如点击时,内容的跳转,标题栏的是否需要滚动。再比如滚动时,标题栏的切换,以及是否需要滚动标题栏

词穷的我,无法表达出我折腾这个的崩溃… 大家如果在使用过程中,有什么问题,可以通过评论或加qq群来咨询

小程序入口

Tabs 组件-scroll

最后一次编辑于  2019-05-23  
点赞 7
收藏
评论

2 个评论

  • 🌙
    🌙
    2019-05-30

    啊啊啊

    2019-05-30
    赞同
    回复
  • 铭锋科技
    铭锋科技
    2019-05-27

    支持造轮子

    2019-05-27
    赞同
    回复 1
    • 🌙
      🌙
      2019-05-27

      谢谢~

      2019-05-27
      回复
登录 后发表内容