浠ヤ笂涓や釜Dom浠ｇ爜beforeEnter鍜宎fterEnter鏂规硶鍒嗗埆鏄姩鐢诲垵濮嬫覆鏌撲箣鍓嶅拰鍔ㄧ敾娓叉煋涔嬪悗锛岄偅涔堟垜浠渶瑕侀噸鐐瑰叧娉ㄨ繖涓や釜鐘舵€侊紝鎴戜滑鍦ㄧ涓€娆℃覆鏌撶殑鏃跺€欏氨纭畾浜嗙悆鐨勪綅缃紝閭ｄ箞杩欎釜鏃跺€欐垜浠鐢ㄥ埌涓€涓柟娉昰etBoundingClientRect锛岃繖涓柟娉曡繑鍥炰竴缁勭煩褰紝杩欎釜鍙互锛屽彲浠ョ敤杩欎釜鏂规硶鏉ュ畾浣嶄竴涓厓绱犲湪灞忓箷涓婄殑浣嶇疆馃槉~鍡紝閭ｆ垜浠繖涓椂鍊欏氨鐏垎浜嗗厛鐢ㄨ繖涓柟娉曞垽鏂喘鐗╄溅鍥炬爣浣曟椂琚偣鍑伙紝璐墿杞﹀皬鍥炬爣璺濈灞忓箷宸︿晶鍜岄《閮ㄧ殑璺濈瀹氫箟涓や釜鏁版嵁鏉ユ帴鍙楃偣鍑昏喘鐗╄溅鍥炬爣寰楀埌鐨勫€糳ata(){return{showMoveDot:[],//鎺у埗涓嬭惤鐐圭殑鏄剧ず鍜岄殣钘廵lLeft:0,//褰撳墠鐐瑰嚮缃戦〉涓喘鐗╄溅鎸夐挳鐨勭粷瀵归《閮ㄥ€糴lTop:0,//褰撳墠鐐瑰嚮鐨勭粷瀵瑰乏渚х偣鍑荤綉椤典腑鐨勮喘鐗╄溅鎸夐挳Value}鐒跺悗鎴戜滑鍦ㄧ偣鍑诲姞鍏ヨ喘鐗╄溅鐨勬柟娉曚腑鑾峰彇浣嶇疆銆傛柟娉曪細{addToCart(){this.showMoveDot=[...this.showMoveDot,true];this.elLeft=event.target.getBoundingClientRect().left;this.elTop=event.target.getBoundingClientRect().top;}}鑷虫锛屼綘宸茬粡鑾峰彇鍒颁綘鐐瑰嚮娣诲姞鍒拌喘鐗╄溅鍥炬爣鐨勪綅缃簡锛屽湪鍔ㄧ敾娓叉煋涔嬪墠锛屾垜浠缃畠鐨則ransform鍊硷紝x,y鍊煎彲浠ヨ嚜宸辫皟鏁达紝璁╁畠鐨勯€忔槑搴︿负0锛屾殏鏃朵笉鏄剧ず銆俠eforeEnter(el){//璁剧疆鍙樻崲鍊糴l.style.transform=`translate3d(${this.elLeft-30}px,${this.elTop-100}px,0)`;//璁剧疆閫忔槑搴l.style.opacity=0;}锛屾帴涓嬫潵鎵嶆槸鍏抽敭锛屽浣曡灏忕悆浠庡綋鍓嶄綅缃Щ鍔ㄥ埌搴曢儴Tabbar鐨勮喘鐗╄溅鍛紵鍚屾牱鐨勶紝鎴戜滑浣跨敤getBoundingClientRect鏂规硶鏉ョ‘瀹氬簳閮═abbar鐨勮喘鐗╄溅鏍囪瘑鐨刲eft鍜宼op鍊笺€備互鏇茬嚎鐨勫舰寮忓悜璐墿杞︾殑x銆亂鏂瑰悜绉诲姩銆傜Щ鍔ㄥ畬鎴愬悗锛岃缃暟缁剆howMoveDot鐨勫睘鎬т负false锛岄€忔槑搴︿负1銆傚湪缁樺埗灏忕悆鍚庣殑鏂规硶涓細afterEnter(el){//鑾峰彇搴曢儴璐墿杞︽爣璇哻onstbadgePosition=document.getElementById(鈥滀拱杞︹€濓級.getBoundingClientRect锛堬級;//璁剧疆鐞冪殑浣嶇Щel.style.transform=`translate3d(${badgePosition.left+30}px,${badgePosition.top-30}px,0)`//娣诲姞璐濆灏旀洸绾縠l.style.transition='transform.88scubic-bezier(0.3,-0.25,0.7,-0.15)';el.style.transition='鍙樻崲.88s绾挎€?;this.showMoveDot=this.showMoveDot.map(item=>false);//璁剧疆閫忔槑搴l.style.opacity=1;鐜板湪浣犲畬鎴愪簡锛佺偣鍑诲姞鍏ヨ喘鐗╄溅鎸夐挳锛屽皬鐞冨彲浠ユ洸绾块鍏ヨ喘鐗╄溅锛屾潵寮犲姩鍥剧偒鑰€鉁库溈銉?掳鈻铰?銉庘溈鏈嬪弸浠暚璇锋湡寰?鈺モ暞^鈺扳暐)浣犱滑瑙夊緱杩欎釜宸茬粡瀹屾垚浜嗭紵瀵逛簬鏋佸馃惖鏉ヨ锛岃繖涓晥鏋滅畝鐩村お浣庝簡锛屾墍浠ユ垜浠竴璧风户缁紭鍖栧惂~绗笁闃舵浣撻獙浼樺寲浼樺寲涓€锛氱偣鍑诲皬鐞冨彉鎴愬綋鍓嶅晢鍝佺殑鍥剧墖銆備竴寮€濮嬶紝瀹冪湡鐨勯毦鍊掍簡鎴戙€傝繖涔堝鍥撅紝璋佺煡閬撴斁鍝竴寮狅紵鐒跺悗鎴戠伒鏈轰竴鍔紝涓嶅氨鏄姩鎬佸姞杞藉浘鐗囧悧锛熷綋浣犵偣鍑诲姞鍏ヨ喘鐗╄溅鏃讹紝宸茬粡鑾峰彇鍒板綋鍓嶇殑鍟嗗搧瀵硅薄銆傛€曚粈涔堬紝鐩存帴鎷垮幓锛?鍦╠ata.data()涓坊鍔犱竴涓猟ropImage灞炴€return{showMoveDot:[],//鎺у埗涓嬭惤鐐圭殑鏄剧ず鍜岄殣钘廵lLeft:0,//褰撳墠鐐瑰嚮鐨勮喘鐗╄溅鎸夐挳涓殑缁濆top鍊肩綉椤礶lTop:0,//褰撳墠鐐瑰嚮缃戦〉涓喘鐗╄溅鎸夐挳鐨勭粷瀵瑰乏鍊糳ropImage:''//鐞冨舰鍥緘2.鑾峰彇dropImage