小程序- 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);
}

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

Tabs 组件-scroll