鏃犻檺寰幆鍒楄〃Vue瀹炵幇涓轰簡瀹炵幇涓婃鐨勬壙璇猴紝璇风湅杩欓噷锛屾垜鍒嗗寘浜嗕竴涓粍浠讹紝涓昏鍔熻兘鏄細鑷姩婊氬姩鏃犻檺寰幆涓嶆柇璇锋眰鏁版嵁绯荤粺鏈夌被浼肩殑components锛堝熀浜巋appy-scroll瀹炵幇锛夛紝浣嗘槸闄や簡涓嶅お濂界敤涔嬪锛岃鍑芥暟娌℃湁瀹炵幇鏃犻檺寰幆锛屽彧鑳芥樉绀哄浐瀹氭暟鎹€侱emo鍦板潃锛岃繖涓猟emo鍙兘瀹炵幇鍗曞悜婊氬姩锛屽拰鎴戞兂瀹炵幇鐨勪笉澶竴鏍凤紝涓嶈繃涓嶇敤鎷呭績锛岀湅璧锋潵涓嶆槸寰堢洿瑙傪煈囷紝鍙互鐪嬬湅鍙宠竟鐨勬粴鍔ㄦ潯,鏁版嵁浼氳嚜鍔ㄥ姞杞藉埌椤堕儴鍜屽簳閮紝slide鍒伴《閮ㄤ細鑷姩婊氬姩鍒拌姹傜殑绗竴鏉℃暟鎹€傝涓嬪浘銆備娇鐢ㄧ粍浠跺悕绉帮細esay-auto-scroll-list灞炴€э細灞炴€idth璁剧疆缁勪欢鐨勫搴︼紝height璁剧疆缁勪欢鐨勯珮搴︺€俬aveData鐘舵€侊紝鏄惁鏈夋暟鎹姞杞界姸鎬侊紝鏄惁姝ｅ湪鍔犺浇鏁版嵁锛堣姹傛暟鎹槸鍚﹁繑鍥烇級flag鏄瘡涓猽l鍞竴鐨刦lag锛寀l蹇呴』鍦ㄦ粴鍔ㄥ埌鐨勬椂鍊欏姞涓奷ata-flag鐨勮嚜瀹氫箟鏍囩閫氱煡bottom/top鍥炶皟鍑芥暟娉ㄦ剰缁勪欢鍙疄鐜颁簡鏁版嵁鐨勬粴鍔ㄥ拰婊氬姩鍒拌竟鐣?Top/Bottom)璋冪敤鍥炶皟鍑芥暟锛屽叿浣撳疄鐜颁笂涓嬫棤闄愭粴鍔ㄦ垨鑰呭崟鍚戞湁闄愭粴鍔ㄦ垨鑰呭叾浠栵紝闇€瑕侀厤鍚堝洖璋冨嚱鏁扮殑锛堢綉涓婁緥瀛愬拰鍗氬鍔ㄧ敾鏄笉鍚岀殑鍥炶皟鍑芥暟锛屾晥鏋滀笉涓€鏍凤級haveData鍜宭oading鏄牴鎹疄闄呰繑鍥炵殑鏁版嵁璁剧疆鐨勩€傚湪鍙戦€佽姹備箣鍓嶏紝havaData=falseloading=true銆傝姹傜粨鏉熷悗haveData鏍规嵁瀹為檯鎯呭喌璁剧疆锛宭oading=false缁勪欢缁勪欢婧愮爜锛屾敞鎰忚繕瑕佷娇鐢╟onfig.js閰嶇疆鏂囦欢锛岃鍦ㄩ」鐩腑浣跨敤瀹為檯鐗堟湰鐨刟utoScrollList銆倂ue鐭ヨ瘑鐐筩lientHeight涓庡厓绱犵殑婊氬姩鍜屼綅缃棤鍏筹紝浠ｈ〃鍏冪礌鐨勯珮搴︼紝鍖呮嫭padding浣嗕笉鍖呮嫭border銆佹按骞虫粴鍔ㄦ潯銆乵argin銆傚浜庡唴鑱斿厓绱狅紝璇ュ睘鎬у缁堜负0锛屽崟浣嶄负px锛屽彧璇诲睘鎬ffsetHeight涓庡厓绱犵殑婊氬姩鍜屼綅缃棤鍏炽€傚畠琛ㄧず鍏冪礌鐨勯珮搴︼紝鍖呮嫭padding銆乥order銆佹按骞虫粴鍔ㄦ潯锛屼絾涓嶅寘鎷琺argin鍏冪礌鐨勯珮搴︺€傚浜庡唴鑱斿厓绱狅紝璇ュ睘鎬у缁堜负0锛屽崟浣嶄负px锛屽彧璇诲睘鎬crollHeight锛屼笌婊氬姩鏉＄浉鍏筹紙瀛愬厓绱犻珮浜庣埗鍏冪礌锛夛紝琛ㄧず褰撳墠涓嶅彲瑙侀儴鍒嗙殑楂樺害銆傚彲瑙侀儴鍒嗕负clientHeight锛屽崟浣峱x锛屽彧璇诲睘鎬у垽鏂槸鍚︽粦鍔ㄥ埌搴曢儴锛歟le.scrollHeight-ele.scrollTop====ele.clientHeightscrollTop琛ㄧず褰撴湁婊氬姩鏉℃椂锛屾粴鍔ㄦ潯鍚戜笅婊氬姩鐨勮窛绂绘槸鍏冪礌椤堕儴琚鐩栭儴鍒嗙殑楂樺害銆俿crollTop==0鍦ㄦ病鏈夋粴鍔ㄦ潯鐨勬椂鍊欐€绘槸鎴愮珛鐨勩€傚崟浣峱x锛屽彲璇诲啓灞炴€ffsetTop杩斿洖褰撳墠鍏冪礌鐩稿浜庡叾offsetParent鍏冪礌椤堕儴鐨勮窛绂伙紙瀛愯竟妗嗗渚у埌鐖惰竟妗嗗唴瀛樼殑璺濈锛夛紝鍗曚綅px锛屽彧璇诲睘鎬lientTop鍏冪礌涓婅竟妗嗙殑瀹藉害锛屼笉鍖呮嫭涓婅竟璺濇垨濉厖銆傚彲浠ョ悊瑙ｄ负瀹氫箟杈规鐨勯珮搴︼紝鍗曚綅涓簆x锛屽彧璇诲睘鎬с€傚熀鏈€濊矾鏄悜涓婃粦鍔ㄩ《閮細鍦ㄥ彂閫佽姹備箣鍓嶏紙璋冪敤鍥炶皟鍑芥暟涔嬪墠锛夛紝淇濆瓨褰撳墠鍒楄〃涓殑绗竴涓暟鎹拰scrollTop鍜宱ffetHeight銆傚綋璇锋眰缁撴潫鏃讹紝鏇存柊鏁版嵁锛屽皢淇濆瓨鐨勬暟鎹彃鍏ュ埌鏈€鏂版暟鎹殑鍚庨潰锛屾洿鏂皊crollTop锛屼繚鎸佽瑙夎繛缁€с€傛粦鍔ㄥ埌搴曢儴锛氬彂閫佽姹傚墠锛堣皟鐢ㄥ洖璋冨嚱鏁板墠锛夛紝淇濆瓨褰撳墠鍒楄〃鐨勬渶鍚庝竴鏉℃暟鎹紝scrollTop鍜宱ffetHeight銆傚綋璇锋眰缁撴潫鏃讹紝鏇存柊鏁版嵁锛屽皢淇濆瓨鐨勬暟鎹彃鍏ュ埌鏈€鏂版暟鎹殑鍓嶉潰锛屾洿鏂皊crollTop锛屼繚鎸佽瑙夎繛缁€с€傛敞鎰忎繚瀛樼殑offsetHeight鏄涓瓙鍏冪礌鐨刼ffsetHeights鐨勯泦鍚堛€備娇鐢╥nsertBefore鎻掑叆鐨勫厓绱犲彲鑳戒細鍦ㄤ笅娆℃洿鏂版暟鎹椂琚繚瀛樸€傞渶瑕佸幓鎺夊浣欑殑瀛愬厓绱狅紙鍞竴鏍囧織鏍囧織鐨勪綔鐢級銆傛渶鍚庝竴缁勬暟鎹瘮杈冪壒娈婏紝鍙兘娌℃湁鏈€鍒濊姹傜殑閭ｄ箞澶氥€傛瘮濡傝缃殑璇锋眰鏁版槸10涓紝浣嗘槸鏈€鍚庝竴缁勬暟鎹彲鑳藉彧鏈?涓紝闇€瑕佺壒娈婂鐞嗐€傚洖璋冨嚱鏁板洖璋冨嚱鏁版槸瀹炵幇闇€瑕佹晥鏋滅殑鍏抽敭锛屽氨鏄湅浣犳€庝箞澶勭悊杈圭晫浣嶇疆鐨勬儏鍐碉紝涓嬮潰鏄垜鐨勫疄渚嬶細asyncloadData(type){this.loading=truethis.moreData=falsethis.flag++letpageif(type===scrollDir.down){if(this.endPage===this.totalPage){this.endPage=1this.startPage=this.totalPage}else{constnewStartPage=(this.startPage+1)%this.totalPageconstnewEndPage=(this.endPage+1)%this.totalPagethis.endPage=newEndPage===0?this.totalPage:newEndPagethis.startPage=this.endPage%this.totalPage-1>0?this.endPage%this.totalPage-1:this.totalPage}page=this.endPage}elseif(type===scrollDir.up){if(this.startPage<=1){this.startPage=this.totalPagethis.endPage=1}else{constnewStartPage=this.startPage-1constnewEndPage=this.endPage-1this.startPage=newStartPage>0?newStartPage:1this.endPage=this.startPage%this.totalPage+1}page=this.startPage}this.investProjectList=awaitthis.getInvestProjectsData({page})this.totalPage=this.investProjectList.pagethis.moreData=truethiss.loading=false}锛屾敞鎰忛渶瑕佸畾涔変袱涓彉閲忥紝startPage鍜宔ndPage锛岀敤鏉ヨ窡韪〉闈㈠彉鍖栥€傞渶瑕佷袱涓彉閲忕殑鍘熷洜鏄綋鍓嶅彲瑙佺獥鍙ｄ腑鍙互鏈夊涓瓙鍏冪礌銆傜患涓婃墍杩帮紝杩欎釜鍔熻兘瀹炵幇鐨勬椂闂村お闀夸簡銆傚啓鍒颁竴鍗婏紝鍙戠幇涓嶈浜嗭紝鍙堟帹浜嗕竴閬嶏紝娴垂浜嗗緢澶氭椂闂淬€傝繖鏄洜涓烘垜鍓嶆湡娌℃湁浠旂粏鎬濊€冨氨寮€濮嬪啓浠ｇ爜锛岀敋鑷冲啓浜嗕竴浜涗笢瑗裤€備笉娓呮锛岄渶瑕佸弽鎬?/p>
