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的滚动,键盘收起。
解决办法:暂时没有找到解决途径