小程式開發-IView Weapp元件庫List 列表的使用
阿新 • • 發佈：2020-09-16
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 |
樣式效果還是非常棒的~~