From c9c263dc43ad90f95f24a036cee9e6b47afb596c Mon Sep 17 00:00:00 2001 From: skyouc Date: 星期六, 21 十二月 2024 18:44:20 +0800 Subject: [PATCH] 新建盐城德森项目 --- uni_modules/uni-list/readme.md | 692 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 346 insertions(+), 346 deletions(-) diff --git a/uni_modules/uni-list/readme.md b/uni_modules/uni-list/readme.md index e4a5d73..1bc5b95 100644 --- a/uni_modules/uni-list/readme.md +++ b/uni_modules/uni-list/readme.md @@ -1,347 +1,347 @@ - - -## List 鍒楄〃 -> **缁勪欢鍚嶏細uni-list** -> 浠g爜鍧楋細 `uList`銆乣uListItem` -> 鍏宠仈缁勪欢锛歚uni-list-item`銆乣uni-badge`銆乣uni-icons`銆乣uni-list-chat`銆乣uni-list-ad` - - -List 鍒楄〃缁勪欢锛屽寘鍚熀鏈垪琛ㄦ牱寮忋�佸彲鎵╁睍鎻掓Ы鏈哄埗銆侀暱鍒楄〃鎬ц兘浼樺寲銆佸绔吋瀹广�� - -鍦╲ue椤甸潰閲岋紝瀹冮粯璁や娇鐢ㄩ〉闈㈢骇婊氬姩銆傚湪app-nvue椤甸潰閲岋紝瀹冮粯璁や娇鐢ㄥ師鐢焞ist缁勪欢婊氬姩銆傝繖鏍风殑闀垮垪琛紝鍦ㄦ粴鍔ㄥ嚭灞忓箷澶栧悗锛岀郴缁熶細鍥炴敹涓嶅彲瑙佸尯鍩熺殑娓叉煋鍐呭瓨璧勬簮锛屼笉浼氶�犳垚婊氬姩瓒婇暱鎵嬫満瓒婂崱鐨勯棶棰樸�� - -uni-list缁勪欢鏄埗瀹瑰櫒锛岄噷闈㈢殑鏍稿績鏄痷ni-list-item瀛愮粍浠讹紝瀹冧唬琛ㄥ垪琛ㄤ腑鐨勪竴涓彲閲嶅琛岋紝瀛愮粍浠跺彲浠ユ棤闄愬惊鐜�� - -uni-list-item鏈夊緢澶氶鏍硷紝uni-list-item缁勪欢閫氳繃鍐呯疆鐨勫睘鎬э紝婊¤冻涓�浜涘父鐢ㄧ殑鍦烘櫙銆傚綋鍐呯疆灞炴�т笉婊¤冻闇�姹傛椂锛屽彲浠ラ�氳繃鎵╁睍鎻掓Ы鏉ヨ嚜瀹氫箟鍒楄〃鍐呭銆� - -鍐呯疆灞炴�у彲浠ヨ鐩栫殑鍦烘櫙鍖呮嫭锛氬鑸垪琛ㄣ�佽缃垪琛ㄣ�佸皬鍥炬爣鍒楄〃銆侀�氫俊褰曞垪琛ㄣ�佽亰澶╄褰曞垪琛ㄣ�� - -娑夊強寰堝澶у浘鎴栦赴瀵屽唴瀹圭殑鍒楄〃锛屾瘮濡傜被浠婃棩澶存潯鐨勬柊闂诲垪琛ㄣ�佺被娣樺疂鐨勭數鍟嗗垪琛紝闇�瑕侀�氳繃鎵╁睍鎻掓Ы瀹炵幇銆� - -涓嬫枃鍧囨湁鏍蜂緥缁欏嚭銆� - -uni-list涓嶅寘鍚笅鎷夊埛鏂板拰涓婃媺缈婚〉銆備笂鎷夌炕椤靛彟瑙佺粍浠讹細[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) - - -### 瀹夎鏂瑰紡 - -鏈粍浠剁鍚圼easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)瑙勮寖锛宍HBuilderX 2.5.5`璧凤紝鍙渶灏嗘湰缁勪欢瀵煎叆椤圭洰锛屽湪椤甸潰`template`涓嵆鍙洿鎺ヤ娇鐢紝鏃犻渶鍦ㄩ〉闈腑`import`鍜屾敞鍐宍components`銆� - -濡傞渶閫氳繃`npm`鏂瑰紡浣跨敤`uni-ui`缁勪欢锛屽彟瑙佹枃妗o細[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) - -> **娉ㄦ剰浜嬮」** -> 涓轰簡閬垮厤閿欒浣跨敤锛岀粰澶у甯︽潵涓嶅ソ鐨勫紑鍙戜綋楠岋紝璇峰湪浣跨敤缁勪欢鍓嶄粩缁嗛槄璇讳笅闈㈢殑娉ㄦ剰浜嬮」锛屽彲浠ュ府浣犻伩鍏嶄竴浜涢敊璇�� -> - 缁勪欢闇�瑕佷緷璧� `sass` 鎻掍欢 锛岃鑷鎵嬪姩瀹夎 -> - 缁勪欢鍐呴儴渚濊禆 `'uni-icons'` 銆乣uni-badge` 缁勪欢 -> - `uni-list` 鍜� `uni-list-item` 闇�瑕侀厤濂椾娇鐢紝鏆備笉鏀寔鍗曠嫭浣跨敤 `uni-list-item` -> - 鍙湁寮�鍚偣鍑诲弽棣堝悗锛屼細鏈夌偣鍑婚�変腑鏁堟灉 -> - 浣跨敤鎻掓Ы鏃讹紝鍙互瀹屽叏鑷畾涔夊唴瀹� -> - note 銆乺ightText 灞炴�ф殏鏃舵病鍋氶檺鍒讹紝涓嶆敮鎸佹枃瀛楁孩鍑洪殣钘忥紝浣跨敤鏃跺簲璇ユ帶鍒堕暱搴︽樉绀烘垨閫氳繃榛樿鎻掓Ы鑷鎵╁睍 -> - 鏀粯瀹濆皬绋嬪簭骞冲彴闇�瑕佸湪鏀粯瀹濆皬绋嬪簭寮�鍙戣�呭伐鍏烽噷寮�鍚� component2 缂栬瘧妯″紡锛屽紑鍚柟寮忥細 璇︽儏 --> 椤圭洰閰嶇疆 --> 鍚敤 component2 缂栬瘧 -> - 濡傛灉闇�瑕佷慨鏀� `switch`銆乣badge` 鏍峰紡锛岃浣跨敤鎻掓Ы鑷畾涔� -> - 鍦� `HBuilderX` 浣庣増鏈腑锛屽彲鑳戒細鍑虹幇缁勪欢鏄剧ず `undefined` 鐨勯棶棰橈紝璇峰崌绾ф渶鏂扮殑 `HBuilderX` 鎴栬�� `cli` -> - 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 - - -### 鍩烘湰鐢ㄦ硶 - -- 璁剧疆 `title` 灞炴�э紝鍙互鏄剧ず鍒楄〃鏍囬 -- 璁剧疆 `disabled` 灞炴�э紝鍙互绂佺敤褰撳墠椤� - -```html -<uni-list> - <uni-list-item title="鍒楄〃鏂囧瓧" ></uni-list-item> - <uni-list-item :disabled="true" title="鍒楄〃绂佺敤鐘舵��" ></uni-list-item> -</uni-list> - -``` - -### 澶氳鍐呭鏄剧ず - -- 璁剧疆 `note` 灞炴�� 锛屽彲浠ュ湪绗簩琛屾樉绀烘弿杩版枃鏈俊鎭� - -```html -<uni-list> - <uni-list-item title="鍒楄〃鏂囧瓧" note="鍒楄〃鎻忚堪淇℃伅"></uni-list-item> - <uni-list-item :disabled="true" title="鍒楄〃鏂囧瓧" note="鍒楄〃绂佺敤鐘舵��"></uni-list-item> -</uni-list> - -``` - -### 鍙充晶鏄剧ず瑙掓爣銆乻witch - -- 璁剧疆 `show-badge` 灞炴�� 锛屽彲浠ユ樉绀鸿鏍囧唴瀹� -- 璁剧疆 `show-switch` 灞炴�э紝鍙互鏄剧ず switch 寮�鍏� - -```html -<uni-list> - <uni-list-item title="鍒楄〃鍙充晶鏄剧ず瑙掓爣" :show-badge="true" badge-text="12" ></uni-list-item> - <uni-list-item title="鍒楄〃鍙充晶鏄剧ず switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item> -</uni-list> - -``` - -### 宸︿晶鏄剧ず鐣ョ缉鍥俱�佸浘鏍� - -- 璁剧疆 `thumb` 灞炴�� 锛屽彲浠ュ湪鍒楄〃宸︿晶鏄剧ず鐣ョ缉鍥� -- 璁剧疆 `show-extra-icon` 灞炴�э紝骞舵寚瀹� `extra-icon` 鍙互鍦ㄥ乏渚ф樉绀哄浘鏍� - -```html - <uni-list> - <uni-list-item title="鍒楄〃宸︿晶甯︾暐缂╁浘" note="鍒楄〃鎻忚堪淇℃伅" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" - thumb-size="lg" rightText="鍙充晶鏂囧瓧"></uni-list-item> - <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="鍒楄〃宸︿晶甯︽墿灞曞浘鏍�" ></uni-list-item> -</uni-list> -``` - -### 寮�鍚偣鍑诲弽棣堝拰鍙充晶绠ご -- 璁剧疆 `clickable` 涓� `true` 锛屽垯琛ㄧず杩欐槸涓�涓彲鐐瑰嚮鐨勫垪琛紝浼氶粯璁ょ粰涓�涓偣鍑绘晥鏋滐紝骞跺彲浠ョ洃鍚� `click` 浜嬩欢 -- 璁剧疆 `link` 灞炴�э紝浼氳嚜鍔ㄥ紑鍚偣鍑诲弽棣堬紝骞剁粰鍒楄〃鍙充晶娣诲姞涓�涓澶� -- 璁剧疆 `to` 灞炴�э紝鍙互璺宠浆椤甸潰锛宍link` 鐨勫�艰〃绀鸿烦杞柟寮忥紝濡傛灉涓嶆寚瀹氾紝榛樿涓� `navigateTo` - -```html - -<uni-list> - <uni-list-item title="寮�鍚偣鍑诲弽棣�" clickable @click="onClick" ></uni-list-item> - <uni-list-item title="榛樿 navigateTo 鏂瑰紡璺宠浆椤甸潰" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> - <uni-list-item title="reLaunch 鏂瑰紡璺宠浆椤甸潰" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> -</uni-list> - -``` - - -### 鑱婂ぉ鍒楄〃绀轰緥 -- 璁剧疆 `clickable` 涓� `true` 锛屽垯琛ㄧず杩欐槸涓�涓彲鐐瑰嚮鐨勫垪琛紝浼氶粯璁ょ粰涓�涓偣鍑绘晥鏋滐紝骞跺彲浠ョ洃鍚� `click` 浜嬩欢 -- 璁剧疆 `link` 灞炴�э紝浼氳嚜鍔ㄥ紑鍚偣鍑诲弽棣堬紝`link` 鐨勫�艰〃绀鸿烦杞柟寮忥紝濡傛灉涓嶆寚瀹氾紝榛樿涓� `navigateTo` -- 璁剧疆 `to` 灞炴�э紝鍙互璺宠浆椤甸潰 -- `time` 灞炴�э紝閫氬父浼氳缃垚鏃堕棿鏄剧ず锛屼絾鏄繖涓睘鎬т笉浠呬粎鍙互璁剧疆鏃堕棿锛屼綘鍙互浼犲叆浠讳綍鏂囨湰锛屾敞鎰忔枃鏈暱搴﹀彲鑳戒細褰卞搷鏄剧ず -- `avatar` 鍜� `avatarList` 灞炴�у悓鏃跺彧浼氭湁涓�涓敓鏁堬紝鍚屾椂璁剧疆鐨勮瘽锛宍avatarList` 灞炴�х殑闀垮害澶т簬1 锛宍avatar` 灞炴�у皢澶辨晥 -- 鍙互閫氳繃榛樿鎻掓Ы鑷畾涔夊垪琛ㄥ彸渚у唴瀹� - -```html - -<uni-list> - <uni-list :border="true"> - <!-- 鏄剧ず鍦嗗舰澶村儚 --> - <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" ></uni-list-chat> - <!-- 鍙充晶甯﹁鏍� --> - <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> - <!-- 澶村儚鏄剧ず鍦嗙偣 --> - <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> - <!-- 澶村儚鏄剧ず瑙掓爣 --> - <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> - <!-- 鏄剧ず澶氬ご鍍� --> - <uni-list-chat title="uni-app" :avatar-list="avatarList" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> - <!-- 鑷畾涔夊彸渚у唴瀹� --> - <uni-list-chat title="uni-app" :avatar-list="avatarList" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"> - <view class="chat-custom-right"> - <text class="chat-custom-text">鍒氬垰</text> - <!-- 闇�瑕佷娇鐢� uni-icons 璇疯嚜琛屽紩鍏� --> - <uni-icons type="star-filled" color="#999" size="18"></uni-icons> - </view> - </uni-list-chat> - </uni-list> -</uni-list> - -``` - -```javascript - -export default { - components: {}, - data() { - return { - avatarList: [{ - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }, { - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }, { - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }] - } - } -} - -``` - - -```css - -.chat-custom-right { - flex: 1; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - justify-content: space-between; - align-items: flex-end; -} - -.chat-custom-text { - font-size: 12px; - color: #999; -} - -``` - -## API - -### List Props - -灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 -:-: |:-: |:-: | :-: -border |Boolean |true | 鏄惁鏄剧ず杈规 - - -### ListItem Props - -灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 -:-: |:-: |:-: | :-: -title |String |- | 鏍囬 -note |String |- | 鎻忚堪 -ellipsis |Number |0 | title 鏄惁婧㈠嚭闅愯棌锛屽彲閫夊�硷紝0:榛樿; 1:鏄剧ず涓�琛�; 2:鏄剧ず涓よ;銆恘vue 鏆備笉鏀寔銆� -thumb |String |- | 宸︿晶缂╃暐鍥撅紝鑻humb鏈夊�硷紝鍒欎笉浼氭樉绀烘墿灞曞浘鏍� -thumbSize |String |medium | 鐣ョ缉鍥惧昂瀵革紝鍙�夊�硷紝lg:澶у浘; medium:涓�鑸�; sm:灏忓浘; -showBadge |Boolean |false | 鏄惁鏄剧ず鏁板瓧瑙掓爣 -badgeText |String |- | 鏁板瓧瑙掓爣鍐呭 -badgeType |String |- | 鏁板瓧瑙掓爣绫诲瀷锛屽弬鑰僛uni-icons](https://ext.dcloud.net.cn/plugin?id=21) -rightText |String |- | 鍙充晶鏂囧瓧鍐呭 -disabled |Boolean |false | 鏄惁绂佺敤 -showArrow |Boolean |true | 鏄惁鏄剧ず绠ご鍥炬爣 -link |String |navigateTo | 鏂伴〉闈㈣烦杞柟寮忥紝鍙�夊�艰涓嬭〃 -to |String |- | 鏂伴〉闈㈣烦杞湴鍧�锛屽濉啓姝ゅ睘鎬э紝click 浼氳繑鍥為〉闈㈡槸鍚﹁烦杞垚鍔� -clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� -showSwitch |Boolean |false | 鏄惁鏄剧ずSwitch -switchChecked |Boolean |false | Switch鏄惁琚�変腑 -showExtraIcon |Boolean |false | 宸︿晶鏄惁鏄剧ず鎵╁睍鍥炬爣 -extraIcon |Object |- | 鎵╁睍鍥炬爣鍙傛暟锛屾牸寮忎负 ``{color: '#4cd964',size: '22',type: 'spinner'}``锛屽弬鑰� [uni-icons](https://ext.dcloud.net.cn/plugin?id=28) -direction | String |row | 鎺掔増鏂瑰悜锛屽彲閫夊�硷紝row:姘村钩鎺掑垪; column:鍨傜洿鎺掑垪; 3涓彃妲芥槸姘村钩鎺掕繕鏄瀭鐩存帓锛屼篃鍙楁灞炴�ф帶鍒� - - -#### Link Options - -灞炴�у悕 | 璇存槑 -:-: | :-: -navigateTo | 鍚� uni.navigateTo() -redirectTo | 鍚� uni.reLaunch() -reLaunch | 鍚� uni.reLaunch() -switchTab | 鍚� uni.switchTab() - -### ListItem Events - -浜嬩欢绉板悕 |璇存槑 |杩斿洖鍙傛暟 -:-: |:-: |:-: -click |鐐瑰嚮 uniListItem 瑙﹀彂浜嬩欢锛岄渶寮�鍚偣鍑诲弽棣� |- -switchChange |鐐瑰嚮鍒囨崲 Switch 鏃惰Е鍙戯紝闇�鏄剧ず switch |e={value:checked} - - - -### ListItem Slots - -鍚嶇О | 璇存槑 -:-: | :-: -header | 宸�/涓婂唴瀹规彃妲斤紝鍙畬鍏ㄨ嚜瀹氫箟榛樿鏄剧ず -body | 涓棿鍐呭鎻掓Ы锛屽彲瀹屽叏鑷畾涔変腑闂村唴瀹� -footer | 鍙�/涓嬪唴瀹规彃妲斤紝鍙畬鍏ㄨ嚜瀹氫箟鍙充晶鍐呭 - - -> **閫氳繃鎻掓Ы鎵╁睍** -> 闇�瑕佹敞鎰忕殑鏄綋浣跨敤鎻掓Ы鏃讹紝鍐呯疆鏍峰紡灏嗕細澶辨晥锛屽彧淇濈暀鎺掔増鏍峰紡锛屾鏃剁殑鏍峰紡闇�瑕佸紑鍙戣�呰嚜宸卞疄鐜� -> 濡傛灉 `uni-list-item` 缁勪欢鍐呯疆灞炴�ф牱寮忔棤娉曟弧瓒抽渶姹傦紝鍙互浣跨敤鎻掓Ы鏉ヨ嚜瀹氫箟uni-list-item閲岀殑鍐呭銆� -> uni-list-item鎻愪緵浜�3涓彲鎵╁睍鐨勬彃妲斤細`header`銆乣body`銆乣footer` -> - 褰� `direction` 灞炴�т负 `row` 鏃惰〃绀烘按骞虫帓鍒楋紝姝ゆ椂 `header` 琛ㄧず鍒楄〃鐨勫乏杈归儴鍒嗭紝`body` 琛ㄧず鍒楄〃鐨勪腑闂撮儴鍒嗭紝`footer` 琛ㄧず鍒楄〃鐨勫彸杈归儴鍒� -> - 褰� `direction` 灞炴�т负 `column` 鏃惰〃绀哄瀭鐩存帓鍒楋紝姝ゆ椂 `header` 琛ㄧず鍒楄〃鐨勪笂杈归儴鍒嗭紝`body` 琛ㄧず鍒楄〃鐨勪腑闂撮儴鍒嗭紝`footer` 琛ㄧず鍒楄〃鐨勪笅杈归儴鍒� -> 寮�鍙戣�呭彲浠ュ彧鐢�1涓彃妲斤紝涔熷彲浠�3涓竴璧蜂娇鐢ㄣ�傚湪鎻掓Ы涓彲鑷富缂栧啓view鏍囩锛屽疄鐜拌嚜宸辨墍闇�鐨勬晥鏋溿�� - - -**绀轰緥** - -```html -<uni-list> - <uni-list-item title="鑷畾涔夊彸渚ф彃妲�" note="鍒楄〃鎻忚堪淇℃伅" link> - <template slot="header"> - <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> - </template> - </uni-list-item> - <uni-list-item> - <!-- 鑷畾涔� header --> - <view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view> - <!-- 鑷畾涔� body --> - <text slot="body" class="slot-box slot-text">鑷畾涔夋彃妲�</text> - <!-- 鑷畾涔� footer--> - <template slot="footer"> - <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> - </template> - </uni-list-item> -</uni-list> -``` - - - - - -### ListItemChat Props - -灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 -:-: |:-: |:-: | :-: -title |String |- | 鏍囬 -note |String |- | 鎻忚堪 -clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� -badgeText |String |- | 鏁板瓧瑙掓爣鍐呭锛岃缃负 `dot` 灏嗘樉绀哄渾鐐� -badgePositon |String |right | 瑙掓爣浣嶇疆 -link |String |navigateTo | 鏄惁灞曠ず鍙充晶绠ご骞跺紑鍚偣鍑诲弽棣堬紝鍙�夊�艰涓嬭〃 -clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� -to |String |- | 璺宠浆椤甸潰鍦板潃锛屽濉啓姝ゅ睘鎬э紝click 浼氳繑鍥為〉闈㈡槸鍚﹁烦杞垚鍔� -time |String |- | 鍙充晶鏃堕棿鏄剧ず -avatarCircle |Boolean |false | 鏄惁鏄剧ず鍦嗗舰澶村儚 -avatar |String |- | 澶村儚鍦板潃锛宎vatarCircle 涓嶅~鏃剁敓鏁� -avatarList |Array |- | 澶村儚缁勶紝鏍煎紡涓� [{url:''}] - -#### Link Options - -灞炴�у悕 | 璇存槑 -:-: | :-: -navigateTo | 鍚� uni.navigateTo() -redirectTo | 鍚� uni.reLaunch() -reLaunch | 鍚� uni.reLaunch() -switchTab | 鍚� uni.switchTab() - -### ListItemChat Slots - -鍚嶇О | 璇存槑 -:- | :- -default | 鑷畾涔夊垪琛ㄥ彸渚у唴瀹癸紙鍖呮嫭鏃堕棿鍜岃鏍囨樉绀猴級 - -### ListItemChat Events -浜嬩欢绉板悕 | 璇存槑 | 杩斿洖鍙傛暟 -:-: | :-: | :-: -@click | 鐐瑰嚮 uniListChat 瑙﹀彂浜嬩欢 | {data:{}} 锛屽鏈� to 灞炴�э紝浼氳繑鍥為〉闈㈣烦杞俊鎭� - - - - - - -## 鍩轰簬uni-list鎵╁睍鐨勯〉闈㈡ā鏉� - -閫氳繃鎵╁睍鎻掓Ы锛屽彲瀹炵幇澶氱甯歌鏍峰紡鐨勫垪琛� - -**鏂伴椈鍒楄〃绫�** - -1. 浜戠涓�浣撴贩鍚堝竷灞�锛歔https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) -2. 浜戠涓�浣撳瀭鐩村竷灞�锛屽ぇ鍥炬ā寮忥細[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) -3. 浜戠涓�浣撳瀭鐩村竷灞�锛屽琛屽浘鏂囨贩鎺掞細[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) -4. 浜戠涓�浣撳瀭鐩村竷灞�锛屽鍥炬ā寮忥細[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) -5. 浜戠涓�浣撴按骞冲竷灞�锛屽乏鍥惧彸鏂囷細[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) -6. 浜戠涓�浣撴按骞冲竷灞�锛屽乏鏂囧彸鍥撅細[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) -7. 浜戠涓�浣撳瀭鐩村竷灞�锛屾棤鍥炬ā寮忥紝涓绘爣棰�+鍓爣棰橈細[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) - -**鍟嗗搧鍒楄〃绫�** - -1. 浜戠涓�浣撳垪琛�/瀹牸瑙嗗浘浜掑垏锛歔https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) -2. 浜戠涓�浣撳垪琛紙瀹牸妯″紡锛夛細[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) -3. 浜戠涓�浣撳垪琛紙鍒楄〃妯″紡锛夛細[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) - -## 缁勪欢绀轰緥 - + + +## List 鍒楄〃 +> **缁勪欢鍚嶏細uni-list** +> 浠g爜鍧楋細 `uList`銆乣uListItem` +> 鍏宠仈缁勪欢锛歚uni-list-item`銆乣uni-badge`銆乣uni-icons`銆乣uni-list-chat`銆乣uni-list-ad` + + +List 鍒楄〃缁勪欢锛屽寘鍚熀鏈垪琛ㄦ牱寮忋�佸彲鎵╁睍鎻掓Ы鏈哄埗銆侀暱鍒楄〃鎬ц兘浼樺寲銆佸绔吋瀹广�� + +鍦╲ue椤甸潰閲岋紝瀹冮粯璁や娇鐢ㄩ〉闈㈢骇婊氬姩銆傚湪app-nvue椤甸潰閲岋紝瀹冮粯璁や娇鐢ㄥ師鐢焞ist缁勪欢婊氬姩銆傝繖鏍风殑闀垮垪琛紝鍦ㄦ粴鍔ㄥ嚭灞忓箷澶栧悗锛岀郴缁熶細鍥炴敹涓嶅彲瑙佸尯鍩熺殑娓叉煋鍐呭瓨璧勬簮锛屼笉浼氶�犳垚婊氬姩瓒婇暱鎵嬫満瓒婂崱鐨勯棶棰樸�� + +uni-list缁勪欢鏄埗瀹瑰櫒锛岄噷闈㈢殑鏍稿績鏄痷ni-list-item瀛愮粍浠讹紝瀹冧唬琛ㄥ垪琛ㄤ腑鐨勪竴涓彲閲嶅琛岋紝瀛愮粍浠跺彲浠ユ棤闄愬惊鐜�� + +uni-list-item鏈夊緢澶氶鏍硷紝uni-list-item缁勪欢閫氳繃鍐呯疆鐨勫睘鎬э紝婊¤冻涓�浜涘父鐢ㄧ殑鍦烘櫙銆傚綋鍐呯疆灞炴�т笉婊¤冻闇�姹傛椂锛屽彲浠ラ�氳繃鎵╁睍鎻掓Ы鏉ヨ嚜瀹氫箟鍒楄〃鍐呭銆� + +鍐呯疆灞炴�у彲浠ヨ鐩栫殑鍦烘櫙鍖呮嫭锛氬鑸垪琛ㄣ�佽缃垪琛ㄣ�佸皬鍥炬爣鍒楄〃銆侀�氫俊褰曞垪琛ㄣ�佽亰澶╄褰曞垪琛ㄣ�� + +娑夊強寰堝澶у浘鎴栦赴瀵屽唴瀹圭殑鍒楄〃锛屾瘮濡傜被浠婃棩澶存潯鐨勬柊闂诲垪琛ㄣ�佺被娣樺疂鐨勭數鍟嗗垪琛紝闇�瑕侀�氳繃鎵╁睍鎻掓Ы瀹炵幇銆� + +涓嬫枃鍧囨湁鏍蜂緥缁欏嚭銆� + +uni-list涓嶅寘鍚笅鎷夊埛鏂板拰涓婃媺缈婚〉銆備笂鎷夌炕椤靛彟瑙佺粍浠讹細[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) + + +### 瀹夎鏂瑰紡 + +鏈粍浠剁鍚圼easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)瑙勮寖锛宍HBuilderX 2.5.5`璧凤紝鍙渶灏嗘湰缁勪欢瀵煎叆椤圭洰锛屽湪椤甸潰`template`涓嵆鍙洿鎺ヤ娇鐢紝鏃犻渶鍦ㄩ〉闈腑`import`鍜屾敞鍐宍components`銆� + +濡傞渶閫氳繃`npm`鏂瑰紡浣跨敤`uni-ui`缁勪欢锛屽彟瑙佹枃妗o細[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) + +> **娉ㄦ剰浜嬮」** +> 涓轰簡閬垮厤閿欒浣跨敤锛岀粰澶у甯︽潵涓嶅ソ鐨勫紑鍙戜綋楠岋紝璇峰湪浣跨敤缁勪欢鍓嶄粩缁嗛槄璇讳笅闈㈢殑娉ㄦ剰浜嬮」锛屽彲浠ュ府浣犻伩鍏嶄竴浜涢敊璇�� +> - 缁勪欢闇�瑕佷緷璧� `sass` 鎻掍欢 锛岃鑷鎵嬪姩瀹夎 +> - 缁勪欢鍐呴儴渚濊禆 `'uni-icons'` 銆乣uni-badge` 缁勪欢 +> - `uni-list` 鍜� `uni-list-item` 闇�瑕侀厤濂椾娇鐢紝鏆備笉鏀寔鍗曠嫭浣跨敤 `uni-list-item` +> - 鍙湁寮�鍚偣鍑诲弽棣堝悗锛屼細鏈夌偣鍑婚�変腑鏁堟灉 +> - 浣跨敤鎻掓Ы鏃讹紝鍙互瀹屽叏鑷畾涔夊唴瀹� +> - note 銆乺ightText 灞炴�ф殏鏃舵病鍋氶檺鍒讹紝涓嶆敮鎸佹枃瀛楁孩鍑洪殣钘忥紝浣跨敤鏃跺簲璇ユ帶鍒堕暱搴︽樉绀烘垨閫氳繃榛樿鎻掓Ы鑷鎵╁睍 +> - 鏀粯瀹濆皬绋嬪簭骞冲彴闇�瑕佸湪鏀粯瀹濆皬绋嬪簭寮�鍙戣�呭伐鍏烽噷寮�鍚� component2 缂栬瘧妯″紡锛屽紑鍚柟寮忥細 璇︽儏 --> 椤圭洰閰嶇疆 --> 鍚敤 component2 缂栬瘧 +> - 濡傛灉闇�瑕佷慨鏀� `switch`銆乣badge` 鏍峰紡锛岃浣跨敤鎻掓Ы鑷畾涔� +> - 鍦� `HBuilderX` 浣庣増鏈腑锛屽彲鑳戒細鍑虹幇缁勪欢鏄剧ず `undefined` 鐨勯棶棰橈紝璇峰崌绾ф渶鏂扮殑 `HBuilderX` 鎴栬�� `cli` +> - 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 + + +### 鍩烘湰鐢ㄦ硶 + +- 璁剧疆 `title` 灞炴�э紝鍙互鏄剧ず鍒楄〃鏍囬 +- 璁剧疆 `disabled` 灞炴�э紝鍙互绂佺敤褰撳墠椤� + +```html +<uni-list> + <uni-list-item title="鍒楄〃鏂囧瓧" ></uni-list-item> + <uni-list-item :disabled="true" title="鍒楄〃绂佺敤鐘舵��" ></uni-list-item> +</uni-list> + +``` + +### 澶氳鍐呭鏄剧ず + +- 璁剧疆 `note` 灞炴�� 锛屽彲浠ュ湪绗簩琛屾樉绀烘弿杩版枃鏈俊鎭� + +```html +<uni-list> + <uni-list-item title="鍒楄〃鏂囧瓧" note="鍒楄〃鎻忚堪淇℃伅"></uni-list-item> + <uni-list-item :disabled="true" title="鍒楄〃鏂囧瓧" note="鍒楄〃绂佺敤鐘舵��"></uni-list-item> +</uni-list> + +``` + +### 鍙充晶鏄剧ず瑙掓爣銆乻witch + +- 璁剧疆 `show-badge` 灞炴�� 锛屽彲浠ユ樉绀鸿鏍囧唴瀹� +- 璁剧疆 `show-switch` 灞炴�э紝鍙互鏄剧ず switch 寮�鍏� + +```html +<uni-list> + <uni-list-item title="鍒楄〃鍙充晶鏄剧ず瑙掓爣" :show-badge="true" badge-text="12" ></uni-list-item> + <uni-list-item title="鍒楄〃鍙充晶鏄剧ず switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item> +</uni-list> + +``` + +### 宸︿晶鏄剧ず鐣ョ缉鍥俱�佸浘鏍� + +- 璁剧疆 `thumb` 灞炴�� 锛屽彲浠ュ湪鍒楄〃宸︿晶鏄剧ず鐣ョ缉鍥� +- 璁剧疆 `show-extra-icon` 灞炴�э紝骞舵寚瀹� `extra-icon` 鍙互鍦ㄥ乏渚ф樉绀哄浘鏍� + +```html + <uni-list> + <uni-list-item title="鍒楄〃宸︿晶甯︾暐缂╁浘" note="鍒楄〃鎻忚堪淇℃伅" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" + thumb-size="lg" rightText="鍙充晶鏂囧瓧"></uni-list-item> + <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="鍒楄〃宸︿晶甯︽墿灞曞浘鏍�" ></uni-list-item> +</uni-list> +``` + +### 寮�鍚偣鍑诲弽棣堝拰鍙充晶绠ご +- 璁剧疆 `clickable` 涓� `true` 锛屽垯琛ㄧず杩欐槸涓�涓彲鐐瑰嚮鐨勫垪琛紝浼氶粯璁ょ粰涓�涓偣鍑绘晥鏋滐紝骞跺彲浠ョ洃鍚� `click` 浜嬩欢 +- 璁剧疆 `link` 灞炴�э紝浼氳嚜鍔ㄥ紑鍚偣鍑诲弽棣堬紝骞剁粰鍒楄〃鍙充晶娣诲姞涓�涓澶� +- 璁剧疆 `to` 灞炴�э紝鍙互璺宠浆椤甸潰锛宍link` 鐨勫�艰〃绀鸿烦杞柟寮忥紝濡傛灉涓嶆寚瀹氾紝榛樿涓� `navigateTo` + +```html + +<uni-list> + <uni-list-item title="寮�鍚偣鍑诲弽棣�" clickable @click="onClick" ></uni-list-item> + <uni-list-item title="榛樿 navigateTo 鏂瑰紡璺宠浆椤甸潰" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> + <uni-list-item title="reLaunch 鏂瑰紡璺宠浆椤甸潰" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> +</uni-list> + +``` + + +### 鑱婂ぉ鍒楄〃绀轰緥 +- 璁剧疆 `clickable` 涓� `true` 锛屽垯琛ㄧず杩欐槸涓�涓彲鐐瑰嚮鐨勫垪琛紝浼氶粯璁ょ粰涓�涓偣鍑绘晥鏋滐紝骞跺彲浠ョ洃鍚� `click` 浜嬩欢 +- 璁剧疆 `link` 灞炴�э紝浼氳嚜鍔ㄥ紑鍚偣鍑诲弽棣堬紝`link` 鐨勫�艰〃绀鸿烦杞柟寮忥紝濡傛灉涓嶆寚瀹氾紝榛樿涓� `navigateTo` +- 璁剧疆 `to` 灞炴�э紝鍙互璺宠浆椤甸潰 +- `time` 灞炴�э紝閫氬父浼氳缃垚鏃堕棿鏄剧ず锛屼絾鏄繖涓睘鎬т笉浠呬粎鍙互璁剧疆鏃堕棿锛屼綘鍙互浼犲叆浠讳綍鏂囨湰锛屾敞鎰忔枃鏈暱搴﹀彲鑳戒細褰卞搷鏄剧ず +- `avatar` 鍜� `avatarList` 灞炴�у悓鏃跺彧浼氭湁涓�涓敓鏁堬紝鍚屾椂璁剧疆鐨勮瘽锛宍avatarList` 灞炴�х殑闀垮害澶т簬1 锛宍avatar` 灞炴�у皢澶辨晥 +- 鍙互閫氳繃榛樿鎻掓Ы鑷畾涔夊垪琛ㄥ彸渚у唴瀹� + +```html + +<uni-list> + <uni-list :border="true"> + <!-- 鏄剧ず鍦嗗舰澶村儚 --> + <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" ></uni-list-chat> + <!-- 鍙充晶甯﹁鏍� --> + <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> + <!-- 澶村儚鏄剧ず鍦嗙偣 --> + <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> + <!-- 澶村儚鏄剧ず瑙掓爣 --> + <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> + <!-- 鏄剧ず澶氬ご鍍� --> + <uni-list-chat title="uni-app" :avatar-list="avatarList" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> + <!-- 鑷畾涔夊彸渚у唴瀹� --> + <uni-list-chat title="uni-app" :avatar-list="avatarList" note="鎮ㄦ敹鍒颁竴鏉℃柊鐨勬秷鎭�" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"> + <view class="chat-custom-right"> + <text class="chat-custom-text">鍒氬垰</text> + <!-- 闇�瑕佷娇鐢� uni-icons 璇疯嚜琛屽紩鍏� --> + <uni-icons type="star-filled" color="#999" size="18"></uni-icons> + </view> + </uni-list-chat> + </uni-list> +</uni-list> + +``` + +```javascript + +export default { + components: {}, + data() { + return { + avatarList: [{ + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }, { + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }, { + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }] + } + } +} + +``` + + +```css + +.chat-custom-right { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: space-between; + align-items: flex-end; +} + +.chat-custom-text { + font-size: 12px; + color: #999; +} + +``` + +## API + +### List Props + +灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 +:-: |:-: |:-: | :-: +border |Boolean |true | 鏄惁鏄剧ず杈规 + + +### ListItem Props + +灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 +:-: |:-: |:-: | :-: +title |String |- | 鏍囬 +note |String |- | 鎻忚堪 +ellipsis |Number |0 | title 鏄惁婧㈠嚭闅愯棌锛屽彲閫夊�硷紝0:榛樿; 1:鏄剧ず涓�琛�; 2:鏄剧ず涓よ;銆恘vue 鏆備笉鏀寔銆� +thumb |String |- | 宸︿晶缂╃暐鍥撅紝鑻humb鏈夊�硷紝鍒欎笉浼氭樉绀烘墿灞曞浘鏍� +thumbSize |String |medium | 鐣ョ缉鍥惧昂瀵革紝鍙�夊�硷紝lg:澶у浘; medium:涓�鑸�; sm:灏忓浘; +showBadge |Boolean |false | 鏄惁鏄剧ず鏁板瓧瑙掓爣 +badgeText |String |- | 鏁板瓧瑙掓爣鍐呭 +badgeType |String |- | 鏁板瓧瑙掓爣绫诲瀷锛屽弬鑰僛uni-icons](https://ext.dcloud.net.cn/plugin?id=21) +rightText |String |- | 鍙充晶鏂囧瓧鍐呭 +disabled |Boolean |false | 鏄惁绂佺敤 +showArrow |Boolean |true | 鏄惁鏄剧ず绠ご鍥炬爣 +link |String |navigateTo | 鏂伴〉闈㈣烦杞柟寮忥紝鍙�夊�艰涓嬭〃 +to |String |- | 鏂伴〉闈㈣烦杞湴鍧�锛屽濉啓姝ゅ睘鎬э紝click 浼氳繑鍥為〉闈㈡槸鍚﹁烦杞垚鍔� +clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� +showSwitch |Boolean |false | 鏄惁鏄剧ずSwitch +switchChecked |Boolean |false | Switch鏄惁琚�変腑 +showExtraIcon |Boolean |false | 宸︿晶鏄惁鏄剧ず鎵╁睍鍥炬爣 +extraIcon |Object |- | 鎵╁睍鍥炬爣鍙傛暟锛屾牸寮忎负 ``{color: '#4cd964',size: '22',type: 'spinner'}``锛屽弬鑰� [uni-icons](https://ext.dcloud.net.cn/plugin?id=28) +direction | String |row | 鎺掔増鏂瑰悜锛屽彲閫夊�硷紝row:姘村钩鎺掑垪; column:鍨傜洿鎺掑垪; 3涓彃妲芥槸姘村钩鎺掕繕鏄瀭鐩存帓锛屼篃鍙楁灞炴�ф帶鍒� + + +#### Link Options + +灞炴�у悕 | 璇存槑 +:-: | :-: +navigateTo | 鍚� uni.navigateTo() +redirectTo | 鍚� uni.reLaunch() +reLaunch | 鍚� uni.reLaunch() +switchTab | 鍚� uni.switchTab() + +### ListItem Events + +浜嬩欢绉板悕 |璇存槑 |杩斿洖鍙傛暟 +:-: |:-: |:-: +click |鐐瑰嚮 uniListItem 瑙﹀彂浜嬩欢锛岄渶寮�鍚偣鍑诲弽棣� |- +switchChange |鐐瑰嚮鍒囨崲 Switch 鏃惰Е鍙戯紝闇�鏄剧ず switch |e={value:checked} + + + +### ListItem Slots + +鍚嶇О | 璇存槑 +:-: | :-: +header | 宸�/涓婂唴瀹规彃妲斤紝鍙畬鍏ㄨ嚜瀹氫箟榛樿鏄剧ず +body | 涓棿鍐呭鎻掓Ы锛屽彲瀹屽叏鑷畾涔変腑闂村唴瀹� +footer | 鍙�/涓嬪唴瀹规彃妲斤紝鍙畬鍏ㄨ嚜瀹氫箟鍙充晶鍐呭 + + +> **閫氳繃鎻掓Ы鎵╁睍** +> 闇�瑕佹敞鎰忕殑鏄綋浣跨敤鎻掓Ы鏃讹紝鍐呯疆鏍峰紡灏嗕細澶辨晥锛屽彧淇濈暀鎺掔増鏍峰紡锛屾鏃剁殑鏍峰紡闇�瑕佸紑鍙戣�呰嚜宸卞疄鐜� +> 濡傛灉 `uni-list-item` 缁勪欢鍐呯疆灞炴�ф牱寮忔棤娉曟弧瓒抽渶姹傦紝鍙互浣跨敤鎻掓Ы鏉ヨ嚜瀹氫箟uni-list-item閲岀殑鍐呭銆� +> uni-list-item鎻愪緵浜�3涓彲鎵╁睍鐨勬彃妲斤細`header`銆乣body`銆乣footer` +> - 褰� `direction` 灞炴�т负 `row` 鏃惰〃绀烘按骞虫帓鍒楋紝姝ゆ椂 `header` 琛ㄧず鍒楄〃鐨勫乏杈归儴鍒嗭紝`body` 琛ㄧず鍒楄〃鐨勪腑闂撮儴鍒嗭紝`footer` 琛ㄧず鍒楄〃鐨勫彸杈归儴鍒� +> - 褰� `direction` 灞炴�т负 `column` 鏃惰〃绀哄瀭鐩存帓鍒楋紝姝ゆ椂 `header` 琛ㄧず鍒楄〃鐨勪笂杈归儴鍒嗭紝`body` 琛ㄧず鍒楄〃鐨勪腑闂撮儴鍒嗭紝`footer` 琛ㄧず鍒楄〃鐨勪笅杈归儴鍒� +> 寮�鍙戣�呭彲浠ュ彧鐢�1涓彃妲斤紝涔熷彲浠�3涓竴璧蜂娇鐢ㄣ�傚湪鎻掓Ы涓彲鑷富缂栧啓view鏍囩锛屽疄鐜拌嚜宸辨墍闇�鐨勬晥鏋溿�� + + +**绀轰緥** + +```html +<uni-list> + <uni-list-item title="鑷畾涔夊彸渚ф彃妲�" note="鍒楄〃鎻忚堪淇℃伅" link> + <template slot="header"> + <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> + </template> + </uni-list-item> + <uni-list-item> + <!-- 鑷畾涔� header --> + <view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view> + <!-- 鑷畾涔� body --> + <text slot="body" class="slot-box slot-text">鑷畾涔夋彃妲�</text> + <!-- 鑷畾涔� footer--> + <template slot="footer"> + <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> + </template> + </uni-list-item> +</uni-list> +``` + + + + + +### ListItemChat Props + +灞炴�у悕 |绫诲瀷 |榛樿鍊� | 璇存槑 +:-: |:-: |:-: | :-: +title |String |- | 鏍囬 +note |String |- | 鎻忚堪 +clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� +badgeText |String |- | 鏁板瓧瑙掓爣鍐呭锛岃缃负 `dot` 灏嗘樉绀哄渾鐐� +badgePositon |String |right | 瑙掓爣浣嶇疆 +link |String |navigateTo | 鏄惁灞曠ず鍙充晶绠ご骞跺紑鍚偣鍑诲弽棣堬紝鍙�夊�艰涓嬭〃 +clickable |Boolean |false | 鏄惁寮�鍚偣鍑诲弽棣� +to |String |- | 璺宠浆椤甸潰鍦板潃锛屽濉啓姝ゅ睘鎬э紝click 浼氳繑鍥為〉闈㈡槸鍚﹁烦杞垚鍔� +time |String |- | 鍙充晶鏃堕棿鏄剧ず +avatarCircle |Boolean |false | 鏄惁鏄剧ず鍦嗗舰澶村儚 +avatar |String |- | 澶村儚鍦板潃锛宎vatarCircle 涓嶅~鏃剁敓鏁� +avatarList |Array |- | 澶村儚缁勶紝鏍煎紡涓� [{url:''}] + +#### Link Options + +灞炴�у悕 | 璇存槑 +:-: | :-: +navigateTo | 鍚� uni.navigateTo() +redirectTo | 鍚� uni.reLaunch() +reLaunch | 鍚� uni.reLaunch() +switchTab | 鍚� uni.switchTab() + +### ListItemChat Slots + +鍚嶇О | 璇存槑 +:- | :- +default | 鑷畾涔夊垪琛ㄥ彸渚у唴瀹癸紙鍖呮嫭鏃堕棿鍜岃鏍囨樉绀猴級 + +### ListItemChat Events +浜嬩欢绉板悕 | 璇存槑 | 杩斿洖鍙傛暟 +:-: | :-: | :-: +@click | 鐐瑰嚮 uniListChat 瑙﹀彂浜嬩欢 | {data:{}} 锛屽鏈� to 灞炴�э紝浼氳繑鍥為〉闈㈣烦杞俊鎭� + + + + + + +## 鍩轰簬uni-list鎵╁睍鐨勯〉闈㈡ā鏉� + +閫氳繃鎵╁睍鎻掓Ы锛屽彲瀹炵幇澶氱甯歌鏍峰紡鐨勫垪琛� + +**鏂伴椈鍒楄〃绫�** + +1. 浜戠涓�浣撴贩鍚堝竷灞�锛歔https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) +2. 浜戠涓�浣撳瀭鐩村竷灞�锛屽ぇ鍥炬ā寮忥細[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) +3. 浜戠涓�浣撳瀭鐩村竷灞�锛屽琛屽浘鏂囨贩鎺掞細[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) +4. 浜戠涓�浣撳瀭鐩村竷灞�锛屽鍥炬ā寮忥細[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) +5. 浜戠涓�浣撴按骞冲竷灞�锛屽乏鍥惧彸鏂囷細[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) +6. 浜戠涓�浣撴按骞冲竷灞�锛屽乏鏂囧彸鍥撅細[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) +7. 浜戠涓�浣撳瀭鐩村竷灞�锛屾棤鍥炬ā寮忥紝涓绘爣棰�+鍓爣棰橈細[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) + +**鍟嗗搧鍒楄〃绫�** + +1. 浜戠涓�浣撳垪琛�/瀹牸瑙嗗浘浜掑垏锛歔https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) +2. 浜戠涓�浣撳垪琛紙瀹牸妯″紡锛夛細[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) +3. 浜戠涓�浣撳垪琛紙鍒楄〃妯″紡锛夛細[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) + +## 缁勪欢绀轰緥 + 鐐瑰嚮鏌ョ湅锛歔https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list) \ No newline at end of file -- Gitblit v1.9.1