鍒氬紑濮嬫帴瑙﹀墠绔繖涓涓氱殑鏃跺€欙紝鎴戞湁涓€涓兂娉曪紝閭ｅ氨鏄啓涓€涓秴閰风殑鍥剧墖棰勮搴撱€傝繕璁板緱鎴戠敤缇庡浘鐪嬬殑鏃跺€欙紝閭ｈ交蹇殑閫熷害鍜屼氦浜掞紝闈炲父璁╀汉鐫€杩枫€傝繖涓粍浠剁殑涓嶅畬鏁寸増鏈嚑骞村墠灏卞嚭杩囷紝鍚庢潵鏂柇缁画缁存姢杩囷紝鎬绘劅瑙夊皯浜嗙偣浠€涔堛€備粖骞存槬鑺傛病鏈変紤鎭紝鎵€鏈夌殑寮€鍙戦兘鍦ㄤ笂闈㈣繘琛岋紝鐜板湪缁堜簬瀹岀編瀹炵幇浜嗭紒鍏堟潵鐪嬬湅鏁堟灉锛氱缉鐣ュ浘瀹岀編娓愬彉锛氭寚瀹氫綅缃斁澶э細鍑忛€熸粴鍔細浠€涔堟槸react-photo-viewreact-photo-view鎷ユ湁鏃犱笌浼︽瘮鐨勯瑙堜氦浜掍綋楠岋細浠庡浘鐗囨墦寮€鐨勯偅涓€鍒昏捣锛屽姩鐢伙紝姣忎竴甯х殑缁嗚妭鍜屼氦浜掗兘鏄粡杩囩簿蹇冭璁″拰鍙嶅璋冭瘯锛屽牚姣斿師鐢熷浘鐗囬瑙堢殑鏁堟灉銆俻npmireact-photo-view姒傝堪锛氫粠'react-photo-view'瀵煎叆{PhotoProvider,PhotoView};瀵煎叆'react-photo-view/dist/react-photo-view.css';瀵煎嚭榛樿鍑芥暟MyComponent(){return();}涓轰粈涔堝崟鐙紑鍙戝畠锛熷綋鐒讹紝鎵х潃浜庡疄鐜颁篃鏄竴鏂归潰锛屼絾鏇存牴鏈殑鍘熷洜鏄湪寮哄ぇ鐨凴eact鐢熸€佷腑娌℃湁濂界敤鐨勫浘鐗囬瑙堣В鍐虫柟妗堛€傚綋鏃跺琛屽€熼壌鐨勫師鍒欙紝鍦ㄧ綉涓婃悳浜嗕竴鍦堝熀浜嶳eact鐨勬斁澶ч瑙堢粍浠跺簱銆傜粨鏋滆鎴戞湁鐐瑰悆鎯娿€傚浘鐗囨斁澶ч瑙堝簱鐨勬暟閲忔槑鏄句笉濡傝疆鎾粍浠跺簱銆傛洿璁╀汉绐掓伅鐨勬槸锛屽湪杩欎簺灏忓緱鍙€滅殑缁勪欢搴撲腑锛屾湁涓€鍗婁互涓婃槸鍩轰簬寮€婧愬簱PhotoSwipe鐨勪簩娆″皝瑁呫€傚彟澶栵紝娌℃湁鍙互鍦ㄥ疄闄呯敓浜т腑浣跨敤鐨勯瑙堢粍浠跺簱銆傘€傘€傚ソ鍍忔病鏈夛紙涔熷彲鑳芥槸鎴戞壘涓嶅埌锛夛紝杩欑鎯呭喌涓嶄粎浠呬綋鐜板湪React搴撲腑锛屽湪鍏朵粬妗嗘灦Vue鐢氳嚦鍘熺敓鐩稿叧搴撱€傚綋鐒讹紝PhotoSwipe涓嶆槸涓嶈兘鐢紝鑰屾槸鍘熺敓鎿嶄綔DOM鐨勬柟寮忓湪React涓樉寰楁牸鏍间笉鍏ワ紝鑰屼笖瀹冪殑浣撶Н涔熷湪gzip12KB浠ヤ笂锛屾樉寰楁湁浜涜噧鑲匡紝鎵€浠ユ墠鏈変簡杩欎釜澶ц儐鐨勬兂娉曘€傚畠鏈夊濂斤紵鍏锋湁闈炲父瀹岀編鐨勭粏鑺傚拰鍔熻兘锛氭敮鎸佽Е鎽告墜鍔匡紝鎷?骞崇Щ/婊戝姩鐗╃悊鏁堟灉锛屼袱鎸囨寚瀹氫綅缃斁澶?缂╁皬锛屽叏鏂归潰鍔ㄧ敾杩炵嚎锛屾墦寮€/鍏抽棴/鍥炲脊/杈圭紭瑙︽懜锛岃嚜鐒朵氦浜掓晥鏋滃浘鐗囪嚜閫傚簲锛屽叿鏈夊悎閫傜殑鍒濆娓叉煋灏哄锛屾牴鎹皟鏁达紝鑷€傚簲鏀寔鎴栦换鎰廐TML鍏冪礌鑷畾涔夐瑙堥敭鐩樺鑸紝瀹岀編閫傞厤妗岄潰绔敮鎸佽嚜瀹氫箟鑺傜偣鎵╁睍锛屾柟渚垮疄鐜板叏灞忛瑙堛€佹棆杞帶鍒躲€佸浘鐗囧紩鍏ョ瓑鏇村鍔熻兘鍩轰簬typescript锛?KBGzipped锛屽苟閫氳繃绠€鍗曟槗鐢ㄧ殑API鏀寔鏈嶅姟绔覆鏌撱€備篃瀵煎嚭浜嗘敮鎸丒S2017鍙婁互涓婄増鏈殑JS锛屽彲浠ュ仛鍒?KBGzipped銆傝兘鍦ㄨ繖鏍蜂竴鍗蜂功閲屽姞鍏ュぇ閲忕殑浣撻獙缁嗚妭锛屽疄灞炰笉鏄撱€傞€氳繃闈炲父绠€鍗曠殑鑷畾涔夋覆鏌撳彲浠ュ疄鐜版洿澶氱殑鍔熻兘锛岄潪甯哥鍚圧eact鐨勭悊蹇碉紝閬垮厤鍐呯疆闈炲垰闇€鐨勫姛鑳姐€傜儹闂ㄥ簱瀵规瘮涓嬭〃缁熻浜嗗ぇ閮ㄥ垎鍦烘櫙闇€瑕佺殑鍑芥暟锛屽睍绀轰簡react-photo-view銆丳hotoSwipe鍜宺c-image(ant-design)鐨勫姣旓細react-photo-viewPhotoSwiperc-imageMINIFIED19KB47KB40KBMINIFIED+GZIPPED7.3KB12KB14KB鍩烘湰棰勮鏀寔鏀寔鍒囨崲棰勮鏀寔涓嶆敮鎸佺Щ鍔ㄧ鏀寔涓嶆敮鎸乼humbnail瀹岀編娓愬彉鏀寔涓嶆敮鎸乼humbnail瑁佸壀鍔ㄧ敾鏀寔鏀寔锛堥渶瑕佹墜鍔ㄦ寚瀹氾級涓嶆敮鎸佽嚜閫傚簲鍥剧墖澶у皬涓嶆敮鎸侊紙闇€瑕佹墜鍔ㄦ寚瀹氾級鏀寔fallback涓嶆敮鎸佹敮鎸侀紶鏍囨粴杞缉鏀炬敮鎸佷笉鏀寔锛堢己浣嶏級spring鐗╃悊婊氬姩鏀寔涓嶆敮鎸佸姩鐢诲弬鏁拌皟鏁存敮鎸佷笉鏀寔鏄撶敤API鏀寔涓嶆敮鎸佷笉鏀寔TypeScript鏀寔涓嶆敮鎸佷笉鏀寔閿洏瀵艰埅涓嶆敮鎸佹敮鎸佽嚜瀹氫箟鍏冪礌鏀寔XSS椋庨櫓doe涓嶆敮鎸佹敮鎸佸彈鎺х粍浠舵敮鎸佹敮鎸佸惊鐜瑙堟敮鎸佹敮鎸佷笉鏀寔鍥剧墖鏃嬭浆鏀寔涓嶆敮鎸佽嚜瀹氫箟宸ュ叿鏍忔敮鎸佷笉鏀寔鍘熺敓鍏ㄥ睆鎵撳紑鑷畾涔夋墿灞曟敮鎸佷笉鏀寔鍙嬪ソ鏂囨。姣旀枃妗ｆ洿閲嶈鐨勬槸浠€涔堬紝瀵逛簬杩欎釜锛岃繕鍑嗗浜嗕竴涓秴缇庣殑鏂囨。锛堢洰鍓嶅彧鏈変腑鏂囷紝鏈夋椂闂村啀缈昏瘧~锛塰ttps://react-photo-view.verc...瀹炵幇杩囩▼鍥剧墖璺熼殢鎵嬫寚婊氬姩锛岃褰曞綋鍓峯nTouchStart鐘舵€佹椂鐨勮Е鍙戜綅缃紝璁╁畠璺熼殢onTouchMove鏃剁殑鎵嬫寚绉诲姩锛宱nTouchEnd灏卞彲浠ヨ交鏉惧疄鐜般€傝Е鎽歌竟缂樹綅缃殑鍙嶉浣垮緱鍒囨崲鍥剧墖鏃堕渶瑕佷粩缁嗚€冭檻缁嗚妭锛氬鏋滀綘鍦╫nTouchStart鍚庣珛鍗崇Щ鍔ㄥ浘鐗囷紝浼氬鑷村緢澶氳鎿嶄綔锛屾瘮濡備綘鎯宠浠栨粦鍔ㄦ椂涓婁笅婊戝姩鐨勯€昏緫鍒囨崲鍥剧墖銆傝繖鏃跺€欏氨闇€瑕佷竴涓?0px鐨勭Щ鍔ㄧ紦鍐叉潵棰勬祴鎵嬫寚绉诲姩鐨勬柟鍚戙€傛寚瀹氬浘鐗囪鏀惧ぇ鐨勪綅缃€備娇鐢╰ransform:scale(value)瀵瑰浘鐗囪繘琛屾斁澶э紝浣嗘槸鏀惧ぇ鐨勬槸鍥剧墖鐨勪腑蹇冿紝鏀惧ぇ鐨勭粨鏋滃彲鑳戒笉鏄綘鎯宠鐨勩€備竴寮€濮嬫垜鏄墦绠楃敤transform-origin鏉ュ疄鐜扮殑銆傛兂娉曚笉閿欙紝铏界劧鏄涓€娆″湪鎸囧畾浣嶇疆鏀惧ぇ銆傚鏋滃噺灏戠殑浣嶇疆涓嶆槸鍘熸潵鐨勪綅缃紝灏变細鍑虹幇涔辫烦銆傛樉鐒讹紝杩欑鏂规硶鏄涓嶉€氱殑銆傚悗鏉ユ兂浜嗘兂涔熺潯涓嶇潃锛屽湪鐫℃ⅵ涓壘鍒扮伒鎰燂細涓轰簡渚夸簬璁＄畻鍜岀悊瑙ｏ紝鎴戜滑灏嗗浘鐗囩殑涓績鐐硅涓?锛屼换鎰忔寚瀹氫綅缃繘琛屾斁澶х缉灏忥紝鍗筹紝鏀瑰彉鍥剧墖涓績鐨勪綅缃€備緥濡傚浘鐗囧搴︿负200锛屼腑蹇冪偣浣嶇疆涓?00锛屽垯浠ユ渶宸﹁竟浣嶇疆涓哄熀鍑嗭紝鏀惧ぇ涓€鍊嶃€傜幇鍦ㄥ浘鐗囧搴︽槸400锛岄偅涔堜腑蹇冪偣鐨勪綅缃簲璇ユ槸200銆傞偅涔堟€荤粨鍏紡濡備笅锛歝onstcenterClientX=innerWidth/2;//鍧愭爣鍋忕Щ閲忚浆鎹onstlastPositionX=centerClientX+lastX;//缂╂斁鍋忕Щ閲廲onstoffsetScale=nextScale/scale;//鏈€缁堝亸绉讳綅缃甤onstoriginX=clientX-(clientX-lastPositionX)*offsetScale-centerClientX;杩欑璁＄畻鏂瑰紡鍙互鎵挎帴鍚勭浣嶇疆鍝嶅簲锛屾瘮濡傚弻鎸囩缉鏀俱€佸弻鎸囨粴鍔?缂╂斁銆佽竟缂樿绠楃瓑銆備袱鎸囦箣闂寸殑璺濈闇€瑕佸垵涓洿瑙掍笁瑙掑舰鍕捐偂瀹氱悊锛歁ath.sqrt((nextClientX-clientX)**2+(nextClientY-clientY)**2);涔嬪墠鐗堟湰鐨勬ā鎷熸粴鍔ㄦ搷浣滄槸浣跨敤transition瀹炵幇鐨勶紝閫氳繃鎵嬫寚婊戝姩寮€濮嬪拰缁撴潫鐨勬椂闂村樊锛岃绠楀垵濮嬮€熷害锛屼及璁ransition妯℃嫙鐨勮窛绂伙紝璁╃溂鐫涚湅璧锋潵鍍忔粴鍔ㄧ殑鏁堟灉馃槀銆備絾鏄繖绉嶆柟寮忕殑浣撻獙鎬绘槸宸緢澶氥€傚悗闈細缁撳悎楂樹腑鐗╃悊鍏紡鏉ユā鎷熸粴鍔ㄦ晥鏋滐細鍔犻€熻繍鍔細绌烘皵闃诲姏锛欳蟻S閮芥槸甯告暟锛屾墍浠ラ兘鍙互浣滀负涓€涓潵琛￠噺銆傝嚦浜庤繖涓噺鏄€庝箞寰楁潵鐨勩€傘€傘€傛垜璇曚簡涓€涓嬸煒傝繖涓彧鍜寁鐨勫钩鏂规垚姝ｆ瘮銆傚彟澶栵紝鍥犱负鍜岀Щ鍔ㄧ殑鏂瑰悜鐩稿弽锛屽彇v鐨勬柟鍚戯紝涔熷氨鏄疢ath.sign(-v)functionscrollMove(initialSpeed:number,callback:(spatial:number)=>boolean,){//鍔犻€熷害甯搁噺鍔犻€熷害=-0.002;//鐢甸樆constresistance=0.0002;璁﹙=鍒濆閫熷害锛涜s=0;璁﹍astTime:鏁板瓧|鏈畾涔?鏈畾涔夛紱璁ゝrameId=0;constcalcMove=(now:number)=>{if(!lastTime){lastTime=now;}constdt=now-lastTime;甯搁噺鏂瑰悜=鏁板銆傛爣蹇楋紙鍒濆閫熷害锛夛紱consta=鏂瑰悜*鍔犻€熷害锛沜onstf=鏁板銆傜鍙?-v)*v**2*鐢甸樆锛沜onstds=v*dt+((a+f)*dt**2)/2;v=v+(a+f)*dt锛泂=s+ds锛?/绉诲姩鍒皊lastTime=now;if(direction*v<=0){cancelAnimationFrame(frameId);杩斿洖;}if(callback(s)){frameId=requestAnimationFrame(calcMove);杩斿洖;}cancelAnimationFrame(frameId);};frameId=requestAnimationFrame(calcMove);}缂╃暐鍥捐鍓狿hotoSwipe鏀寔缂╃暐鍥捐鍓紝浣嗛渶瑕佷汉宸ュ紩瀵肩‘瀹氬浘鐗囩殑瀹介珮鍜屾暟鎹鍓槸鐩稿綋楹荤儲鐨勩€俽eact-photo-view閫氳繃璇诲彇缂╃暐鍥緂etComputedStyle(element).objectFit鑾峰彇褰撳墠瑁佸壀鍙傛暟銆傚疄鐜拌嚜鍔ㄨ鍓晥鏋溿€傚吋瀹规€у鐞嗙敱浜庢瘡涓浘鍍忛兘鏄竴涓悎鎴愬眰锛岃繖浼氭秷鑰楃浉褰撳鐨勫唴瀛樸€侷OS涓婄殑鍐呭瓨鏈夌浉褰撳ぇ鐨勯檺鍒躲€傚鏋滃浘鍍忓湪鏀惧ぇ鏃舵€绘槸缂╂斁锛岄偅涔堝湪Safari涓婁細鏄惧緱闈炲父妯＄硦銆傜幇鍦ㄦ瘡娆＄Щ鍔ㄥ畬鎴愬悗锛屾妸鍥剧墖鐨勫楂橀兘鏀规垚鎸囧畾鐨勫€硷紝鐒跺悗鎶妔cale閲嶆柊璁剧疆涓?锛岃繖涓柟娉曞簲璇ュ彲浠ヨ揪鍒伴鏈熺殑鏁堟灉銆傚彟涓€浣峆hotoSwipe鐨勪綔鑰呮槸灞呬綇鍦ㄥ熀杈呯殑涔屽厠鍏颁汉锛屼粬閫冪浜嗗熀杈咃紝鐜板湪浠栧拰浠栫殑瀹朵汉鍦ㄤ箤鍏嬪叞瑗块儴寰堝畨鍏紝甯屾湜浠栬兘鍦ㄦ垬鍚庢尟浣滆捣鏉ャ€傜粨璁烘垜鍦╮eact-photo-view鐨勭粏鑺備笂鑺变簡寰堝绮惧姏銆傚枩娆㈢殑璇濆彲浠ュ府鎴戠偣涓猻tarhttps://github.com/MinJieLiu/react-photo-view璋㈣阿锛?/p>
