建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序擴展組件·選項卡組件
tabs
選項卡組件。
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站建設、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的紅古網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
{{item.title2}}
{{item.desc}}
Page({
onShareAppMessage() {
return {
title: 'tabs',
path: 'page/weui/example/tabs/tabs'
}
},
data: {
tabs: [],
activeTab: 0,
},
onLoad() {
const tabs = [
{
title: '技術開發(fā)',
title2: '小程序開發(fā)進階',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
desc: '本視頻系列課程，由騰訊課堂NEXT學院與微信團隊聯(lián)合出品，通過實戰(zhàn)案例，深入淺出地進行講解。',
},
{
title: '產(chǎn)品解析',
title2: '微信小程序直播',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
desc: '微信小程序直播系列課程持續(xù)更新中，幫助大家更好地理解、應用微信小程序直播功能。',
},
{
title: '運營規(guī)范',
title2: '常見問題和解決方案',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
desc: '提高審核質量',
},
{
title: '營銷經(jīng)驗',
title2: '流量主小程序',
img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
desc: '本課程共四節(jié)，將分階段為開發(fā)者展示如何開通流量主功能、如何接入廣告組件、不同類型小程序接入的建議，以及如何通過工具調(diào)優(yōu)小程序變現(xiàn)效率。',
},
{
title: '高校大賽',
title2:'2020中國高校計算機大賽',
img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
desc: '微信小程序應用開發(fā)賽',
},
]
this.setData({ tabs })
},
onTabClick(e) {
const index = e.detail.index
this.setData({
activeTab: index
})
},
onChange(e) {
const index = e.detail.index
this.setData({
activeTab: index
})
},
handleClick(e) {
wx.navigateTo({
url: './webview',
})
}
})屬性列表
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| tabs | Array | [] | 是 | 數(shù)據(jù)項格式為 {title} |
| tab-class | String | 否 | 選項卡樣式 | |
| swiper-class | String | 否 | 內(nèi)容區(qū)域 swiper 的樣式 | |
| active-class | String | 否 | 選中項樣式 | |
| tab-underline-color | String | #07c160 | 否 | 選中項下劃線顏色 |
| tab-active-text-color | String | #000000 | 否 | 選中項字體顏色 |
| tab-inactive-text-color | String | #000000 | 否 | 未選中項字體顏色 |
| tab-background-color | String | #ffffff | 否 | 選項卡背景顏色 |
| active-tab | Number | 0 | 否 | 激活 tab 索引 |
| duration | Number | 500 | 否 | 內(nèi)容區(qū)域切換時長 |
| bindtabclick | eventhandle | 否 | 點擊 tab 時觸發(fā)，e.detail={index} | |
| bindchange | eventhandle | 否 | 內(nèi)容區(qū)域滾動導致 tab 變化時觸發(fā), e.detail={index} |
注意事項
- 內(nèi)容區(qū)域采用
進行滾動，超出部分將被隱藏，需設置 swiperClass 的高度與子元素一致。 - 內(nèi)容區(qū)域子元素需指定 slot=tab-content-index，其中 index 為選項卡的下標（從0開始）。
當前題目：創(chuàng)新互聯(lián)小程序教程：微信小程序擴展組件·選項卡組件
標題網(wǎng)址：http://fisionsoft.com.cn/article/dhedpce.html
