建站
咨詢
售后
建站咨詢
新聞中心
微信小程序擴(kuò)展組件·縱向選項(xiàng)卡組件
翔安網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
微信小程序作為一款輕量級(jí)的應(yīng)用，其功能豐富且易于開發(fā)，在微信小程序中，我們可以使用各種擴(kuò)展組件來豐富應(yīng)用的功能，本文將介紹一種常用的擴(kuò)展組件——縱向選項(xiàng)卡組件。
縱向選項(xiàng)卡組件簡(jiǎn)介
縱向選項(xiàng)卡組件是一種常見的UI組件，它可以在一個(gè)頁(yè)面中展示多個(gè)選項(xiàng)，用戶可以通過點(diǎn)擊不同的選項(xiàng)切換到不同的頁(yè)面或內(nèi)容，這種組件通常用于展示多個(gè)相關(guān)的內(nèi)容，方便用戶快速瀏覽和選擇。
縱向選項(xiàng)卡組件的使用方法
1、在小程序的app.json文件中，添加"usingComponents"字段，聲明要使用的縱向選項(xiàng)卡組件：
{
"usingComponents": {
"vantabs": "path/to/vantweapp/dist/tabs/index"
}
}
2、在需要使用縱向選項(xiàng)卡組件的頁(yè)面的json文件中，引入組件：
{
"usingComponents": {
"vantab": "path/to/vantweapp/dist/tabs/index"
}
}
3、在頁(yè)面的wxml文件中，添加縱向選項(xiàng)卡組件：
內(nèi)容1 內(nèi)容2 內(nèi)容3
縱向選項(xiàng)卡組件的屬性和方法
1、屬性：
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
| active | Number | 0 | 當(dāng)前激活的標(biāo)簽索引，從0開始 |
| animated | Boolean | true | 是否開啟動(dòng)畫效果 |
| duration | Number | 300 | 動(dòng)畫時(shí)長(zhǎng)，單位為毫秒 |
| color | String | #999999 | 標(biāo)題顏色 |
| fontSize | Number | 14 | 標(biāo)題字體大小 |
| backgroundColor | String | #ffffff | 背景顏色 |
| borderStyle | String | solid | 邊框樣式 |
| borderColor | String | #eeeeee | 邊框顏色 |
| lineHeight | Number | 50 | 行高，單位為rpx |
| radius | Number | 8 | 圓角大小，單位為rpx |
| scrollable | Boolean | false | 是否開啟滾動(dòng)條 |
| lazyLoad | Boolean | false | 是否開啟懶加載 |
| showIndicator | Boolean | true | 是否顯示指示器 |
| leftIconColor | String | #999999 | 左側(cè)圖標(biāo)顏色（僅適用于自定義圖標(biāo)） |
| rightIconColor | String | #999999 | 右側(cè)圖標(biāo)顏色（僅適用于自定義圖標(biāo)） |
| fixedColor | String | #1aad19 | 固定態(tài)的顏色（僅適用于自定義圖標(biāo)） |
| activeColor | String | #1aad19 | 激活態(tài)的顏色（僅適用于自定義圖標(biāo)） |
| disabledColor | String | #cccccc | 禁用態(tài)的顏色（僅適用于自定義圖標(biāo)） |
| fontWeight | String | normal | 標(biāo)題字體粗細(xì)，可選值為normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900、inherit等 |
| fontStyle | String | normal | 標(biāo)題字體樣式，可選值為normal、italic、oblique等 |
| textAlign | String | center | 標(biāo)題對(duì)齊方式，可選值為left、center、right等 |
| customIconsLeft / customIconsRight / customIconsTop / customIconsBottom / customIconsInactiveText / customIconsActiveText / customIconsInactiveColor / customIconsActiveColor / customIconsInactiveSize / customIconsActiveSize / customIconsInactiveFontFamily / customIconsActiveFontFamily / customIconsInactiveLineHeight / customIconsActiveLineHeight / customIconsInactiveFontWeight / customIconsActiveFontWeight / customIconsInactiveFontStyle / customIconsActiveFontStyle (僅適用于自定義圖標(biāo)) Custom icons for the tab bar, can be set individually for each tab. These properties are only valid when using the custom type of tab. For more information, please refer to the official documentation.
| zIndex Number The zindex of the tab bar, default is auto. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaInsetBottom Number The bottom inset of the safe area, default is auto. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaInsetTop Number The top inset of the safe area, default is auto. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaInsetLeft Number The left inset of the safe area, default is auto. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaInsetRight Number The right inset of the safe area, default is auto. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaBackgroundColor Color The background color of the safe area, default is transparent. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaBackgroundImage Image The background image of the safe area, default is none. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaCustomBackgroundColor Color The background color of the safe area when it overlaps with the content, default is transparent. This property is only valid when using the custom type of tab. For more information, please refer to the official documentation.
| safeAreaCustomBackgroundImage Image The background image of the safe area when it overlaps with the content, default is none. This property是縱向選項(xiàng)卡組件的使用方法，在小程序的app.json文件中，添加"usingComponents"字段，聲明要使用的縱向選項(xiàng)卡組件：
<
“`json
{
"usingComponents": {
"vantabs": "path/to/vantweapp/dist/tabs/index"
}
}
“`
在需要使用縱向選項(xiàng)卡組件的頁(yè)面的json文件中，引入組件：
“`json
{
"usingComponents": {
"vantab": "path/to/vantweapp/dist/tabs/index"
}
}
“`
在頁(yè)面的wxml文件中，添加縱向選項(xiàng)卡組件：
“`html
“`
縱向選項(xiàng)卡組件的屬性和方法
1、屬性：
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
||||
| active | Number | 當(dāng)前激活的標(biāo)簽索引，從0開始 | 當(dāng)前激活的標(biāo)簽索引，從0開始 |
| animated | Boolean | true | true表示開啟動(dòng)畫效果，false表示關(guān)閉動(dòng)畫效果 |
| duration | Number | 300 | animationDuration屬性指定動(dòng)畫時(shí)長(zhǎng)，單位為ms |
| color | String | #999999 | title文字顏色 |
| fontSize | Number | 14 | title文字大小
網(wǎng)頁(yè)題目：微信小程序縱向布局
瀏覽地址：http://m.fisionsoft.com.cn/article/ccceggs.html
