项目中的奇葩滚动问题

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Nana_9457/article/details/84402886

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

展开阅读全文

struts项目中遇到一个奇葩问题

02-08

下面是异常信息,代码我看了半天没问题啊,求大家帮忙找下,谢谢!顺便祝大家新年快乐!rnrn[code=java]rnINFO: Server startup in 40686 msrnHibernate: select eleccommon0_.comID as comID1_, eleccommon0_.stationRun as stationRun1_, eleccommon0_.devRun as devRun1_, eleccommon0_.createDate as createDate1_ from Elec_CommonMsg eleccommon0_ where 1=1rnHibernate: select eleccommon0_.comID as comID1_, eleccommon0_.stationRun as stationRun1_, eleccommon0_.devRun as devRun1_, eleccommon0_.createDate as createDate1_ from Elec_CommonMsg eleccommon0_ where 1=1rn二月 08, 2013 5:12:34 下午 org.apache.catalina.core.ApplicationDispatcher invokernSEVERE: Servlet.service() for servlet jsp threw exceptionrnrnError on line 26, column 13 in template/simple/dynamic-attributes.ftlrnExpecting a string, date or number here, Expression parameters.dynamicAttributes[aKey] is instead a freemarker.ext.beans.SimpleMethodModelrnThe problematic instruction:rn----------rn==> $parameters.dynamicAttributes[aKey]?html [on line 26, column 11 in template/simple/dynamic-attributes.ftl]rn in include "/$parameters.templateDir/simple/dynamic-attributes.ftl" [on line 48, column 1 in template/simple/textarea.ftl]rn----------rnrnJava backtrace for programmers:rn----------rnfreemarker.core.NonStringException: Error on line 26, column 13 in template/simple/dynamic-attributes.ftlrnExpecting a string, date or number here, Expression parameters.dynamicAttributes[aKey] is instead a freemarker.ext.beans.SimpleMethodModelrn at freemarker.core.Expression.getStringValue(Expression.java:126)rn at freemarker.core.Expression.getStringValue(Expression.java:93)rn at freemarker.core.StringBuiltins$StringBuiltIn._getAsTemplateModel(StringBuiltins.java:71)rn at freemarker.core.Expression.getAsTemplateModel(Expression.java:89)rn at freemarker.core.Expression.getStringValue(Expression.java:93)rn at freemarker.core.DollarVariable.accept(DollarVariable.java:76)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.MixedContent.accept(MixedContent.java:92)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.IteratorBlock$Context.runLoop(IteratorBlock.java:167)rn at freemarker.core.Environment.visit(Environment.java:416)rn at freemarker.core.IteratorBlock.accept(IteratorBlock.java:102)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.MixedContent.accept(MixedContent.java:92)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.ConditionalBlock.accept(ConditionalBlock.java:79)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.MixedContent.accept(MixedContent.java:92)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.Environment.include(Environment.java:1482)rn at freemarker.core.Include.accept(Include.java:169)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.MixedContent.accept(MixedContent.java:92)rn at freemarker.core.Environment.visit(Environment.java:209)rn at freemarker.core.Environment.process(Environment.java:189)rn at freemarker.template.Template.process(Template.java:237)rnrnrn[/code]rnrn 论坛

目中出现的问题~~~

11-29

各位大家好:rn 这是我现在项目中出现的问题,麻烦大家帮忙解决rnrnrneXosip是自己编的一个库!rnrn LINK : warning LNK4075: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(jresponse.obj) : error LNK2019: rnSipCPM.lib(SipCPM_Init.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(jresponse.obj) : error LNK2019: rnSipCPM.lib(SipCPM_Init.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(jresponse.obj) : error LNK2001: rnSipCPM.lib(SipCPM_Init.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2001: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2001: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2001: rneXosip.lib(jcallback.obj) : error LNK2001: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2019: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2001: rneXosip.lib(jcallback.obj) : error LNK2001: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2001: rneXosip.lib(jcallback.obj) : error LNK2001: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(eXutils.obj) : error LNK2001: rneXosip.lib(udp.obj) : error LNK2001: rneXosip.lib(jresponse.obj) : error LNK2001: rneXosip.lib(eXconf.obj) : error LNK2019: rneXosip.lib(jrequest.obj) : error LNK2019: rneXosip.lib(jcallback.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2001: rneXosip.lib(jevents.obj) : error LNK2019: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(jevents.obj) : error LNK2019: rneXosip.lib(udp.obj) : error LNK2019: rneXosip.lib(eXtransport.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(jpipe.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2019: rneXosip.lib(eXutils.obj) : error LNK2019: rneXosip.lib(udp.obj) : error LNK2019: rn.\Debug/ptos.exe : fatal error LNK1120: 37 rn请大家麻烦看看 论坛

没有更多推荐了,返回首页