鏈€杩戞湁涓伐浣滈渶姹傛槸鏆撮湶鍩嬬偣锛岃鎴戞湁鏈轰細鎺ヨЕ鍒扮浉鍏崇殑涓滆タ銆傛垜涔嬪墠鐨勫疄涔犳病鏈夊仛杩囪繖绉嶉渶姹傦紝涓汉椤圭洰涔熷拰鍩嬬偣鏃犲叧銆備互鑷充簬涓婂懆鍦ㄤ細璁笂璁ㄨ鐨勬椂鍊欏惉鍒扳€滃煁鐐光€濊繖涓瘝鎴戦兘瀹虫€曚簡銆備笉杩囧悗鏉ュ惉浜嗚€佸ぇ鐨勫垎鏋愶紝鎵嶆槑鐧解€滃煁鐐光€濈殑鏈箟鏄繖鏍风殑銆傛毚闇插煁鐐圭殑鎬濊矾涔熷緢绠€鍗曪細鏃犻潪灏辨槸鍒ゆ柇绐楀彛涓槸鍚﹀嚭鐜颁簡鏌愪釜DOM锛屽嚭鐜颁簡灏遍噰闆嗘暟鎹笂鎶ョ粰鏈嶅姟鍣ㄣ€傛墍璋撯€滃煁鐐光€濇槸鏁版嵁閲囬泦棰嗗煙锛堝挨鍏舵槸鐢ㄦ埛琛屼负鏁版嵁閲囬泦棰嗗煙锛夌殑鏈锛屾槸鎸囧鐗瑰畾鐨勭敤鎴疯涓烘垨浜嬩欢杩涜鎹曡幏銆佸鐞嗗拰鍙戦€佺殑鐩稿叧鎶€鏈拰瀹炵幇杩囩▼銆傛瘮濡傜敤鎴风偣鍑绘煇绡囨枃绔犵殑娆℃暟锛岃鐪嬫煇涓棰戠殑鏃堕暱绛夌瓑銆傚啀鏉ヨ璇粹€滄洕鍏夊煁鐐光€濓紝杩欏拰鈥滃浘鐗囨噿鍔犺浇鈥濄€佲€滃箍鍛婃祻瑙堥噺鐨勮绠椻€濇槸涓€鏍风殑銆傛湰璐ㄥ氨鏄浣犺绠楀嚭涓€涓厓绱犲拰鍙︿竴涓厓绱狅紙绐楀彛锛夌殑鐩稿瑙嗚鐘舵€?鐩稿浣嶇疆锛岀劧鍚庤繘琛屼竴浜涙搷浣滐紙涓€鑸細涓婃姤缁欐湇鍔″櫒锛夈€傛€濊€冨浣曞疄鐜扮涓€涓兂鍒扮殑鏂规硶灏辨槸浣跨敤getBoundingClientRect/offset绫?onscroll銆傚嵆锛氭敞鍐屾粴鍔ㄤ簨浠讹紝鐒跺悗鍦ㄦ粴鍔ㄥ洖璋冨嚱鏁颁腑浣跨敤getBoundingClientRect/offset绫昏幏鍙栧悇涓厓绱犵殑浣嶇疆淇℃伅锛屽啀閫氳繃鍒ゆ柇鍒ゆ柇鍏冪礌鏄惁澶勪簬鏇濆厜鐘舵€?绐楀彛銆備絾鏄繖绉嶆柟娉曟湁涓€涓緢澶х殑缂洪櫡銆傚鏋滅啛鎮夋祻瑙堝櫒鐨勬覆鏌撹繃绋嬶紝灏变細鐭ラ亾璋冪敤getBoundingClientRect/offset绫讳細瀵艰嚧娴忚鍣ㄥ洖娴侀噸缁橈紝褰卞搷缃戦〉鎬ц兘/鎬ц兘銆傞绻佸拰澶х殑鍛煎彨涓嶆槸涓€涓悎閫傜殑閫夋嫨銆傛垜寮€濮嬪皾璇曞湪绀惧尯涓鎵惧叾浠栨洿鍚堥€傜殑鏂规硶锛屾灉鐒舵壘鍒颁簡锛欼ntersectionObserverIntersectionObserver锛屽畠鎻愪緵浜嗕竴绉嶅紓姝ヨ瀵熺洰鏍囧厓绱犱笌绁栧厛鍏冪礌鎴栭《灞傛枃妗iewport鐨勪氦闆嗗彉鍖栫殑鏂规硶銆備篃灏辨槸璇达紝瀹冧笉浠呭彲浠ョ敤浜庤幏鍙栫浉瀵逛簬瑙嗗彛鐨勬洕鍏夛紝杩樺彲浠ョ敤鏉ュ仛鏇村鐨勪簨鎯咃紝鍏蜂綋鍙栧喅浜庘€滃彟涓€涓厓绱犫€濇槸浠€涔堛€侷ntersectionObserver瀹屾垚浜嗗紑鍙戜汉鍛樺簲璇ュ畬鎴愮殑宸ヤ綔锛氱洃鎺ф粴鍔紝閬嶅巻浠ヨ幏寰椾竴涓厓绱犱笌鍙︿竴涓厓绱狅紙鎴栫獥鍙ｏ級鐨勭浉瀵逛綅缃€傝繖涓ら」宸ヤ綔鏄€犳垚椤甸潰鎬ц兘鎹熷け鐨勪富瑕佸洜绱犮€傜幇鍦ㄤ氦缁欐祻瑙堝櫒鍘诲仛姣旀垜浠紑鍙戜汉鍛樻洿鍚堥€傘€傚紑鍙戣€呯幇鍦ㄥ彧闇€瑕佸叧蹇冨叾浠栫殑涓氬姟閫昏緫鍗冲彲馃榿杩欎箞濂界敤鐨凙PI锛屽吋瀹规儏鍐靛浣曪紵杩樹笉閿欙紝浣嗘槸濡傛灉鍏煎鎬ц姹傞珮锛岃繕鏄笉鑳芥斁蹇冧娇鐢ㄣ€侾olyfill浣嗗埆鎷呭績锛屾垜浠湁polyfill銆俉3C鎻愪緵浜嗕竴涓猵olyfill锛屽湪娴忚鍣ㄤ笉鏀寔鏃朵娇鐢ㄩ€氬父鐨勮В鍐虫柟妗堛€傚畠鐨勬€濊矾鏄綋妫€娴嬪埌褰撳墠娴忚鍣ㄤ笉鏀寔IntersectionObserverAPI鏃讹紝浣跨敤getBoundingClientRect閲嶆柊瀹炵幇IntersectionObserverAPI銆傞偅涔堜娇鐢≒olyfill鍚庢祻瑙堝櫒鍏煎鎯呭喌濡備綍鍛紵浼熷ぇ鐨勶紒馃槑锛堟敮鎸両E7锛屽ぇ鍝ヤ綘杩樻兂瑕佷粈涔堛€傦級exposure瀹炵幇姝ラ鐨勬€濊矾灏辨槸涓婇潰璇寸殑锛屽緢绠€鍗曪細newIntersectionObserver()瀹炰緥鍖栦竴涓叏灞€瑙傚療鍣紝锛堢粨鍚圴ue鎸囦护锛夎姣忎釜DOM鑷繁灏嗚嚜宸辨坊鍔犲埌瑙傚療鑰呯殑瑙傚療鍒楄〃涓€傚綋鏌愪釜DOM杩涘叆绐楀彛鏃讹紝鏀堕泦鐩稿簲鐨勪俊鎭苟涓婃姤銆傚彇娑堝璇OM鐨勮瀵熴€備唬鐮佸疄鐜癊xposure.ts灏佽鎴愮被import'intersection-observer';exportdefaultclassExposure{privateobserver:IntersectionObserver|涓嶆槑纭殑;鏋勯€犲嚱鏁帮紙锛墈this.init锛堬級;}privateinit(){constself=this;this.observer=newIntersectionObserver((entries,observer)=>{entries.forEach(item=>{if(item.isIntersecting){constdata=item.target.getAttribute('data-article');self.upload(鏁版嵁);observer!.unobserve(item.target);}});},{root:null,rootMargin:'0',threshold:0.1,});}publicadd(el:Element){this.observer&&this.observer.observe(el);}privateupload(data:string|null){if(data){//ajax涓婃姤鏁版嵁}}}directive/exposure.ts灏佽Vue鎸囦护浠?@/lib/Exposure'瀵煎叆Exposure;浠?vue'瀵煎叆Vue;constexposure=newExposure();Vue.directive('exposure',{bind(el){exposure.add(el);},});*.vue浣跨敤鎸囦护
