㈠ uniapp鍒朵綔嫻鋒姤-鏂版墜鎬庝箞鐢╱niapp鍒朵綔鍥句腑灝忕▼搴忕殑鏍峰紡錛
uniapp鍒嗕韓寮圭獥錛岀敓鎴愭搗鎶ュ苟鏀鎸佷繚瀛,鐩鍓嶄粎鏀鎸佸井淇″皬紼嬪簭<pstyle="text-align:center;">鍦板潃涓:
鏂版墜鎬庝箞鐢╱niapp鍒朵綔鍥句腑灝忕▼搴忕殑鏍峰紡錛寰堝氭柊鎵嬪湪寮濮嬪埗浣滃皬紼嬪簭鐨勬椂鍊欓兘鎯沖揩閫熷仛涓涓鍔熻兘鐪嬭搗鏉ヤ笉閿欑殑灝忕▼搴,閭ｄ箞鎬庝箞鍋氬憿?涓嬮潰灝忕紪緇欏ぇ瀹跺垎浜涓涓嬨
鏂規硶/姝ラ
棣栧厛澶у惰佷笅杞芥寜鐓Hbuilder杞浠,鐐瑰嚮鏂板緩涓嬮潰鐨勯」鐩
鎺ョ潃欏圭洰綾誨瀷閲岄潰閫夋嫨uni-app,鐒跺悗閫夋嫨涓涓妯℃澘,濡備笅鍥炬墍紺
鐒跺悗灝卞壋寤哄ソ浜嗛」鐩鐨勭洰褰,濡備笅鍥炬墍紺
鎺ョ潃鎵撳紑Hbuilder鐨勮劇疆鐣岄潰,閰嶇疆灝忕▼搴忓紑鍙戝伐鍏風殑璺寰,濡備笅鍥炬墍紺
鐒跺悗鎵撳紑灝忕▼搴忓紑鍙戝伐鍏,閫夋嫨瀹夊叏璁劇疆
鎺ョ潃寮鍚鏈嶅姟絝鍙,濡備笅鍥炬墍紺
鎺ヤ笅鏉ユ垜浠鐐瑰嚮Hbuilder鐨勮繍琛岃彍鍗,閫夋嫨榪愯屽埌灝忕▼搴忔ā鎷熷櫒鐨勫井淇″紑鍙戣呭伐鍏蜂笂,濡備笅鍥炬墍紺
鏈鍚庡氨鍙浠ョ湅鍒頒竴涓灝忕▼搴忓氨蹇閫熷埗浣滃畬鎴愪簡,濡備笅鍥炬墍紺
浜屻乽ni-app妯℃澘鍧楀父鐢ㄥ啓娉曚互鍙婃敞鎰忎簨欏v-for鎸囦護闇瑕佷嬌鐢╥teminitems褰㈠紡鐨勭壒孌婅娉,鍏朵腑items鏄婧愭暟鎹鏁扮粍,鑰宨tem鍒欐槸琚榪浠ｇ殑鏁扮粍鍏冪礌鐨勫埆鍚嶃
絎涓涓鍙傛暟item鍒欐槸琚榪浠ｇ殑鏁扮粍鍏冪礌鐨勫埆鍚嶃
絎浜屾紡縐熶釜鍙傛暟,鍗沖綋鍓嶉」浜╁崌鐨勭儲寮昳ndex,鏄鍙閫夌殑銆
緇撴灉
褰揤ue姝ｅ湪鏇存柊浣跨敤v-for娓叉煋鐨勫厓緔犲垪琛ㄦ椂,瀹冮粯璁や嬌鐢ㄢ滃氨鍦版洿鏂扳濈殑絳栫暐銆傚傛灉鏁版嵁欏圭殑欏哄簭琚鏀瑰彉,Vue灝嗕笉浼氱Щ鍔―OM鍏冪礌鏉ュ尮閰嶆暟鎹欏圭殑欏哄簭,鑰屾槸灝卞湴鏇存柊姣忎釜鍏冪礌,騫朵笖紜淇濆畠浠鍦ㄦ瘡涓緔㈠紩浣嶇疆姝ｇ『娓叉煋銆
鏄劇ず鏁堟灉
姝ゆ椂鎶奩鐨剆witch榪涜屾墦寮,鏄劇ず鏁堟灉
闅忓悗鏇存敼鏁版嵁婧愪負datList2,鏄劇ず鏁堟灉涓
姝ゆ椂鍙戠幇鏈鏉ユ槸Y鎵撳紑,欏墮儴鏂板炰竴涓鍏冪礌鍚庡彉鎴愭槸X鎵撳紑,榪欏氨鏄鎵璋撶殑灝卞湴鏇存柊姣忎釜鍏冪礌,姣忎釜緔㈠紩浣嶇疆榪涜屾ｇ『娓叉煋,鑰宻witch鏄娌℃湁琚閲嶆柊榪呮悳鑰佹覆鏌撶殑(鍥犱負鏁版嵁婧愭病鏈夋帶鍒秙witch寮鍏崇姸鎬佺殑淇濆瓨),鎵浠ユ樉紺虹殑浣嶇疆灝變笉瀵逛簡銆
濡傛灉鍒楄〃涓欏圭洰鐨勪綅緗浼氬姩鎬佹敼鍙樻垨鑰呮湁鏂扮殑欏圭洰娣誨姞鍒板垪琛ㄤ腑,騫朵笖甯屾湜鍒楄〃涓鐨勯」鐩淇濇寔鑷宸辯殑鐗瑰緛鍜岀姸鎬(濡俰nput涓鐨勮緭鍏ュ唴瀹,switch鐨勯変腑鐘舵),闇瑕佷嬌鐢:key鏉ユ寚瀹氬垪琛ㄤ腑欏圭洰鐨勫敮涓鐨勬爣璇嗙︺
閲嶅嶅備笂鎿嶄綔,鏄劇ず涓烘ｇ『
濡備笉鎻愪緵:key,浼氭姤涓涓獁arning,濡傛灉鏄庣『鐭ラ亾璇ュ垪琛ㄦ槸闈欐,鎴栬呬笉蹇呭叧娉ㄥ叾欏哄簭,鍙浠ラ夋嫨蹇界暐銆
#娉ㄦ剰#褰撳悓涓涓欏甸潰鍚屾椂瀛樺湪涓や釜鎴栦袱涓浠ヤ笂鐨剉-for閬嶅巻鐨勬椂鍊,key鍊間笉鑳介噸澶嶅惁鍒橦5鎶ラ敊
㈡ 2022-04-19uniapp uview閫夐」鍗active鍒囨崲鏂囧瓧 鍜 鍥劇墖
闇奼傛槸鍦ㄥ垏鎹㈤夐」鍗＄殑鏃跺 鍒囨崲鏂囧瓧鍜屽浘鐗
鏁堟灉濡備笅錛
㈢ uniapp濡備綍緇欑緝鏀劇殑鍥劇墖鍔犲渾瑙
uniapp緙╂斁鐨勫浘鐗囧姞鍦嗚掔殑鏂規硶濡備笅錛
1銆佸湪闇瑕佸渾瑙掔殑鍥劇墖鏄屾棌澶栧眰鍖呰９涓涓猟iv錛屽苟緇欒繖涓猟iv璁劇疆涓涓鍥哄畾鐨勫藉害鍜岄珮搴︺
2銆侀氳繃border-radius灞炴ц劇疆鍦嗚掑紛棣栧崐寰勶紝騫墮氳繃overflow灞炴цВ鍐沖渾瑙掓棤鏁堢殑闂棰樸
3銆侀氳繃overflow錛歨idden璁╁浘鐗囧湪瓚呭嚭澶栧眰瀹瑰櫒鐨勯儴鍒嗚闅愯棌銆
4銆侀氳繃object-fit錛歝over瑙ｅ喅鍥劇墖鍦ㄧ緝鏀捐繃紼嬩腑鐨勬媺浼擱棶棰樸
鐢變簬鍥劇墖鍦ㄧ緝鏀捐繃紼嬩腑鏈夊彲鑳藉瓨鍦ㄥけ鐪熸垨鎷変幾鐨勬儏鍐碉紝鍥犳ゅ湪鍔犲渾瑙掓椂闇瑕佹牴鎹瀹為檯鎯呭喌閫傚綋璋冩暣鍦嗚掑崐寰勶紝浠ヤ繚璇佽愬崪寮婃樉紺烘晥鏋滅﹀悎瑕佹眰銆
㈣ 怎麼在uniapp、index.vue中導入圖片
在uniapp、index.vue中導入圖片的方法分別如下：
1、在uniapp導入圖片的方法是在js中通過require() 引入圖片（圖片大小不能超過3kb）或在html中通過相對路徑引入（絕對路徑打包後圖片不顯示）。
2、在index.vue中導入圖片的方法是先給圖片地址綁定變數，在script中設置變數。直接將圖片引入為模塊，require imgUrl from "../assets/test.png"。即可完成圖片的導入。