项目中的奇葩滚动问题

1、touch项目：

⚠️注意：如果是多个橫划组件只显示一个，需要一开始都显示，新建橫划组件，然后再新建后隐藏（不然没法计算宽度等，bug效果是滑动弹回）；

2、node项目：

⚠️注意：子子子…组件高度变化（如展开／收起条目），父组件的Scroller不改变高度，现用的办法是从父组件传递一个函数funSta到子组件，函数的功能是改变父组件的state里一个变量，子子子…组件在点击展开／收起按钮的时候触发父组件的funSta，从而使父组件的Scroller重新计算高度。
（存在问题：最后一个收起后，页面底部会有空白，需要再滑动一下，触发onScroller()，恢复高度）;

程序问题发现（子组件中问题）
体会两者差异：

changeShowRestList = (option) => {
    this.props.refreshScrollHeight(option);
    this.setState({
        showRestList : ! this.state.showRestList
    });
}

changeShowRestList = (option) => {
    this.setState({
        showRestList : ! this.state.showRestList
    }, () => {
        this.props.refreshScrollHeight({"option": option, "choose": this.props.choose});
    });
}

关键原因：子组件的setState应该执行结束，得到新的高度后，再调用父组件的函数（解决问题花费时间：1个晚上加一个上午）

一直在找Scroller的问题，直到父组件打印ReactDOM.findDOMNode(this.refs.scroller).getBoundingClientRect().height发现展开后反而高度小，收起后高度大，发现可能是异步的问题，参照解决setState异步问题

程序问题发现（父组件中问题）
问题复现：酒店13家，景点2家，美食22家。点击顺序：酒店展开->美食展开->酒店收起->美食收起。美食收起后页面出现大片空白。
已解决：点击后打印出的是scroller改变之前的maxScrollY，所以判断应该是进if，结果进了else，导致出现空白，利用setTimeout包裹。
问题发现：每一步跟踪，将打印对比，发现this.Scroller和this.Scroller.maxScrollY紧挨着打印却数值不一样->首先想到引用变量打印呈现最终值，由此发现是异步问题，紧接着对比打印结果发现this.Scroller.maxScrollY打印的跟上一个this.Scroller里的maxScrollY相同。
解决办法：所以将if-else判断用setTimeout，保证取到的this.Scroller.maxScrollY是最新的。
// 酒店点击展开后
absStartY: 0; maxScrollY: -1774; scrollerHeight: 2451; wrapperHeight: 677
//向下滑动到底，美食点击展开后
absStartY: -1774; maxScrollY: -3718; scrollerHeight: 4395; wrapperHeight: 677
// 向上滑动到酒店收起，酒店点击收起后（打印：-3718，-1774）
absStartY: -1232；maxScrollY: -2638；scrollerHeight: 3315；
// 向下滑动到底，美食点击收起后（打印：-2638，-1774）
absStartY: -2638；maxScrollY: -694；scrollerHeight: 1371

// 解决子组件状态改变不渲染父组件的render导致Scroller滚动出现遮挡
// （已解决：还是有问题最后一项收起后会出现空白 —— 通过记录展开前scroller的位移实现）
refreshScrollHeight(obj) {
	// console.log(this.scroller.maxScrollY);
	const { forScroll } = this.state;
	this.setState({
		forScroll: !forScroll
	});
	if (obj.option === 'close') {
		// console.log(this.scroller);
		// 利用setTimeout回调，解决Scroller异步计算，直接获取会得到收起前的maxScrollY的问题
		setTimeout(() => {
			// console.log(this.scroller.maxScrollY);
			// console.log(this.state.backOffset);
			// 判断是否超界(超界则跳转至0)
			if (Math.abs(this.scroller.maxScrollY) > Math.abs(this.state.backOffset)) {
				this.scroller.scrollTo(0, this.state.backOffset, 0);
			} else {
				this.scroller.scrollTo(0, 0, 0);
			}
		}, 0);
	}
	if (obj.option === 'open') {
		this.setState({
			backOffset: this.scroller.absStartY
		});
	}
}

3、微信小程序

页面是一个，里面嵌套了一个，页面左右上下有padding（本来是加在外层的上的），结果发现在滑动页面时如果在边缘的padding上滑动，页面会跟着滑动，上面会出现灰色区域。
问题原因：滑动时触发的是page的scroll。
解决办法：将padding全部加到上，就不会触发page的scroll了。

4. RN

场景：标题输入框、下面一个提示列表(FlatList)，标题改变时提示列表随意改变（关键词变了）
问题复现：标题输入“a”，将提示列表滑动到底部(滑动开始时键盘收起，通过FlatList的key…属性设置)，然后接着“a”输入"f"，键盘自动收起。
期望：输入“f”后不收起键盘，因为用户可能还没有输入完，此时不应该收起键盘。
原因：与node项目的“文中好物”列表页问题类似，上一次滑动到底部，但是这一次条目可能不如上一次多，滑动不到底部，所以滑动位置改变，间接触发了FlatList的滚动，键盘收起。
解决办法：暂时没有找到解决途径