㈠ uniapp鍒朵綔娴锋姤-鏂版坠镐庝箞鐢╱niapp鍒朵綔锲句腑灏忕▼搴忕殑镙峰纺锛
uniapp鍒嗕韩寮圭獥锛岀敓鎴愭捣鎶ュ苟鏀鎸佷缭瀛,鐩鍓崭粎鏀鎸佸井淇″皬绋嫔簭<pstyle="text-align:center;">鍦板潃涓:
鏂版坠镐庝箞鐢╱niapp鍒朵綔锲句腑灏忕▼搴忕殑镙峰纺锛寰埚氭柊镓嫔湪寮濮嫔埗浣滃皬绋嫔簭镄勬椂鍊欓兘𨱍冲揩阃熷仛涓涓锷熻兘鐪嬭捣𨱒ヤ笉阌欑殑灏忕▼搴,闾d箞镐庝箞锅氩憿?涓嬮溃灏忕紪缁椤ぇ瀹跺垎浜涓涓嬨
鏂规硶/姝ラ
棣栧厛澶у惰佷笅杞芥寜镦Hbuilder杞浠,镣瑰嚮鏂板缓涓嬮溃镄勯”鐩
鎺ョ潃椤圭洰绫诲瀷閲岄溃阃夋嫨uni-app,铹跺悗阃夋嫨涓涓妯℃澘,濡备笅锲炬墍绀
铹跺悗灏卞垱寤哄ソ浜嗛”鐩镄勭洰褰,濡备笅锲炬墍绀
鎺ョ潃镓揿紑Hbuilder镄勮剧疆鐣岄溃,閰岖疆灏忕▼搴忓紑鍙戝伐鍏风殑璺寰,濡备笅锲炬墍绀
铹跺悗镓揿紑灏忕▼搴忓紑鍙戝伐鍏,阃夋嫨瀹夊叏璁剧疆
鎺ョ潃寮钖链嶅姟绔鍙,濡备笅锲炬墍绀
鎺ヤ笅𨱒ユ垜浠镣瑰嚮Hbuilder镄勮繍琛岃彍鍗,阃夋嫨杩愯屽埌灏忕▼搴忔ā𨰾熷櫒镄勫井淇″紑鍙戣呭伐鍏蜂笂,濡备笅锲炬墍绀
链钖庡氨鍙浠ョ湅鍒颁竴涓灏忕▼搴忓氨蹇阃熷埗浣滃畬鎴愪简,濡备笅锲炬墍绀
浜屻乽ni-app妯℃澘鍧楀父鐢ㄥ啓娉曚互鍙婃敞镒忎簨椤v-for鎸囦护闇瑕佷娇鐢╥teminitems褰㈠纺镄勭壒娈婅娉,鍏朵腑items鏄婧愭暟鎹鏁扮粍,钥宨tem鍒欐槸琚杩浠g殑鏁扮粍鍏幂礌镄勫埆钖嶃
绗涓涓鍙傛暟item鍒欐槸琚杩浠g殑鏁扮粍鍏幂礌镄勫埆钖嶃
绗浜屾纺绉熶釜鍙傛暟,鍗冲綋鍓嶉”浜╁崌镄勭储寮昳ndex,鏄鍙阃夌殑銆
缁撴灉
褰揤ue姝e湪镟存柊浣跨敤v-for娓叉煋镄勫厓绱犲垪琛ㄦ椂,瀹冮粯璁や娇鐢ㄢ滃氨鍦版洿鏂扳濈殑绛栫暐銆傚傛灉鏁版嵁椤圭殑椤哄簭琚鏀瑰彉,Vue灏嗕笉浼氱Щ锷―OM鍏幂礌𨱒ュ尮閰嶆暟鎹椤圭殑椤哄簭,钥屾槸灏卞湴镟存柊姣忎釜鍏幂礌,骞朵笖纭淇濆畠浠鍦ㄦ疮涓绱㈠紩浣岖疆姝g‘娓叉煋銆
鏄剧ず鏁堟灉
姝ゆ椂鎶奁镄剆witch杩涜屾墦寮,鏄剧ず鏁堟灉
闅忓悗镟存敼鏁版嵁婧愪负datList2,鏄剧ず鏁堟灉涓
姝ゆ椂鍙戠幇链𨱒ユ槸Y镓揿紑,椤堕儴鏂板炰竴涓鍏幂礌钖庡彉鎴愭槸X镓揿紑,杩椤氨鏄镓璋撶殑灏卞湴镟存柊姣忎釜鍏幂礌,姣忎釜绱㈠紩浣岖疆杩涜屾g‘娓叉煋,钥宻witch鏄娌℃湁琚閲嶆柊杩呮悳钥佹覆镆撶殑(锲犱负鏁版嵁婧愭病链夋带鍒秙witch寮鍏崇姸镐佺殑淇濆瓨),镓浠ユ樉绀虹殑浣岖疆灏变笉瀵逛简銆
濡傛灉鍒楄〃涓椤圭洰镄勪綅缃浼氩姩镐佹敼鍙樻垨钥呮湁鏂扮殑椤圭洰娣诲姞鍒板垪琛ㄤ腑,骞朵笖甯屾湜鍒楄〃涓镄勯”鐩淇濇寔镊宸辩殑鐗瑰緛鍜岀姸镐(濡俰nput涓镄勮緭鍏ュ唴瀹,switch镄勯変腑鐘舵),闇瑕佷娇鐢:key𨱒ユ寚瀹氩垪琛ㄤ腑椤圭洰镄勫敮涓镄勬爣璇嗙︺
閲嶅嶅备笂镎崭綔,鏄剧ず涓烘g‘
濡备笉鎻愪緵:key,浼氭姤涓涓犸arning,濡傛灉鏄庣‘鐭ラ亾璇ュ垪琛ㄦ槸闱欐,鎴栬呬笉蹇呭叧娉ㄥ叾椤哄簭,鍙浠ラ夋嫨蹇界暐銆
#娉ㄦ剰#褰揿悓涓涓椤甸溃钖屾椂瀛桦湪涓や釜鎴栦袱涓浠ヤ笂镄剉-for阆嶅巻镄勬椂鍊,key鍊间笉鑳介吨澶嶅惁鍒橦5鎶ラ敊
㈡ 2022-04-19uniapp uview阃夐”鍗active鍒囨崲鏂囧瓧 鍜 锲剧墖
闇姹傛槸鍦ㄥ垏鎹㈤夐”鍗$殑镞跺 鍒囨崲鏂囧瓧鍜屽浘鐗
鏁堟灉濡备笅锛
㈢ uniapp濡备綍缁欑缉鏀剧殑锲剧墖锷犲浑瑙
uniapp缂╂斁镄勫浘鐗囧姞鍦呜掔殑鏂规硶濡备笅锛
1銆佸湪闇瑕佸浑瑙掔殑锲剧墖鏄屾棌澶栧眰鍖呰9涓涓猟iv锛屽苟缁栾繖涓猟iv璁剧疆涓涓锲哄畾镄勫藉害鍜岄珮搴︺
2銆侀氲繃border-radius灞炴ц剧疆鍦呜掑纷棣栧崐寰勶纴骞堕氲繃overflow灞炴цВ鍐冲浑瑙掓棤鏁堢殑闂棰樸
3銆侀氲繃overflow锛歨idden璁╁浘鐗囧湪瓒呭嚭澶栧眰瀹瑰櫒镄勯儴鍒呜闅愯棌銆
4銆侀氲繃object-fit锛歝over瑙e喅锲剧墖鍦ㄧ缉鏀捐繃绋嬩腑镄勬媺浼搁梾棰樸
鐢变簬锲剧墖鍦ㄧ缉鏀捐繃绋嬩腑链夊彲鑳藉瓨鍦ㄥけ鐪熸垨𨰾変几镄勬儏鍐碉纴锲犳ゅ湪锷犲浑瑙掓椂闇瑕佹牴鎹瀹为檯𨱍呭喌阃傚綋璋冩暣鍦呜掑崐寰勶纴浠ヤ缭璇佽愬崪寮婃樉绀烘晥鏋灭﹀悎瑕佹眰銆
㈣ 怎么在uniapp、index.vue中导入图片
在uniapp、index.vue中导入图片的方法分别如下:
1、在uniapp导入图片的方法是在js中通过require() 引入图片(图片大小不能超过3kb)或在html中通过相对路径引入(绝对路径打包后图片不显示)。
2、在index.vue中导入图片的方法是先给图片地址绑定变量,在script中设置变量。直接将图片引入为模块,require imgUrl from "../assets/test.png"。即可完成图片的导入。