小程序開發-IView Weapp組件庫List 列表的使用

IView Weapp List列表

1. 引入List組件

"usingComponents": {
    "i-cell-group": "../../dist/cell-group/index",
    "i-cell": "../../dist/cell/index"
}

2. 在wxml中使用i-cell-group和i-cell組件

<i-cell-group>
    <i-cell title="開關" is-link>
        <i-icon slot="icon" type="activity" size="28" color="#80848f" />
    </i-cell>
    <i-cell title="跳轉到首頁" is-link url="/pages/index"></i-cell>
    <i-cell title="只有 footer 點擊有效" is-link url="/pages/logs/logs" only-tap-footer></i-cell>
    <i-cell title="開關">
        <switch slot="footer" checked />
    </i-cell>
</i-cell-group>

注：上面使用了i-icon組件在列表的某一欄增加圖標

3. 最終效果

4. 其他參數

屬性	說明	類型	默認值
i-class	自定義 class 類名	String	-
title	左側標題	String	-
label	標題下方的描述信息	String	-
value	右側內容	String	-
only-tap-footer	只有點擊 footer 區域才觸發 tab 事件	Boolean	false
is-link	是否展示右側箭頭並開啟嘗試以 url 跳轉	null	-
url	當 isLink 設置為 true 時，點擊 cell 會嘗試跳轉到該路徑	String	-
link-type	鏈接類型，可選值為 navigateTo，redirectTo，switchTab，reLaunch	String	navigateTo

樣式效果還是非常棒的~~