小程序怎么實(shí)現(xiàn)tab卡片切換功能

這篇文章主要介紹小程序怎么實(shí)現(xiàn)tab卡片切換功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、UI與交互

首先我們來看看要實(shí)現(xiàn)的ui模樣和交互效果吧，下圖是我們的一個入口，以下的每一個icon區(qū)域點(diǎn)擊進(jìn)去都會展示對應(yīng)的卡片展示。

例如我點(diǎn)擊tab2這一個icon時，對應(yīng)跳轉(zhuǎn)到如下圖所示。

該頁面的展示為頭部是一長條tab欄，左右可滑動，兩邊需要留出空白區(qū)域以實(shí)現(xiàn)兩端的tab可實(shí)現(xiàn)居中效果，點(diǎn)擊對應(yīng)的tab可展示相應(yīng)的卡片，且該tab的文字會居中展示。類似輪播圖左右切換的效果，我想作為用戶應(yīng)該很容易可以想到這種交互。

當(dāng)前激活的卡片會有一個感覺比別的卡片稍微大那么一點(diǎn)點(diǎn)的效果，且可看見前后的卡片的邊。且該卡片區(qū)域也可左右滑動實(shí)現(xiàn)與頭部tab欄一樣交互的效果。

大概就是這樣的一個交互效果啦！

二、實(shí)現(xiàn)方案的設(shè)計(jì)

1、首先我們需要知道前端展示的所有tab是一直都這樣展示這么多個嗎，還是說有可能后續(xù)會擴(kuò)展，再或許說有可能在這上面進(jìn)行迭代。我個人認(rèn)為這里可以跟后端商量一下，將我們需要展示的內(nèi)容統(tǒng)一做成一套常量配置，然后就可以做出我們的動態(tài)渲染了。在這里我是大概維護(hù)了這樣的一個constant。

data: [
  {
    title: 'tab2', // 標(biāo)題
    logoUrl: 'xxx', // 圖標(biāo)地址
    isNeed: false, // 是否需要該tab 
    id: '', // 每個tab對應(yīng)的一個id,與后端交互使用
    content: '' // 每個tab對應(yīng)的一些內(nèi)容,用于擴(kuò)展
    ...
  }
]

就是大概的這樣以上的一個數(shù)據(jù)結(jié)構(gòu)。

2、在入口處點(diǎn)擊對應(yīng)icon時可以把相對應(yīng)的數(shù)組index或者id帶入詳情頁面，以實(shí)現(xiàn)對應(yīng)的卡片展示以及對應(yīng)的ui

3、在詳情頁面的設(shè)計(jì)中，我將該頁面分成兩個組件展示。

• Header為對應(yīng)的scroll-tab組件，在該組件中我使用了微信小程序提供的組件scroll-view，在這里我們需要給其設(shè)置scroll-x的參數(shù)使其能夠進(jìn)行左右滑動，設(shè)置scroll-left參數(shù)實(shí)現(xiàn)我們點(diǎn)擊某個tab或者滑動卡片時能夠滾動到中間去。

• Content為對應(yīng)的swiper-card組件，在該組件中我使用了微信小程序提供的組件swiper，在這里我們需要給其設(shè)置previous-margin和next-margin屬性設(shè)置當(dāng)前卡片與前后兩張卡片的距離，current屬性設(shè)置當(dāng)前展示的卡片，bindchange事件用于卡片切換時的交互。

• index頁面?zhèn)鲄⑽疫x擇傳對應(yīng)的一些數(shù)據(jù)以及current值和事件處理函數(shù)

<view>
    <scroll-tab data="{{data}}" current="{{current}}" bind:chooseDetail="handleChooseDetail" />
    <swiper-card data="{{data}}" current="{{current}}" bind:swiperChange="handleSwiperChange" />
</view>

4、具體實(shí)現(xiàn)

• 對于Header的tab欄兩邊留出可滑動的空間，因?yàn)閟croll-view內(nèi)部元素是無法占滿該tab的寬度的，因此我們沒有辦法給其設(shè)置100%來實(shí)現(xiàn)。在這里我開始的想法是給其前后放置一個空白元素來給其寬度實(shí)現(xiàn)，后面參考了某個寫法用了page-meta這個我也不太清楚是什么鬼的組件來設(shè)置左右的padding來實(shí)現(xiàn)，但是會有page-meta只用于頁面首個節(jié)點(diǎn)的warning。對于兩邊距離的的設(shè)置，和scroll-left的設(shè)置，我采用了以下方法。

wx.getSystemInfo({
          success: res => {
            this.marginWidth = res.windowWidth / 2 // 兩邊空白距離
          }
        })
        
        
const computedPosition = (margin, textArr, preWidthArr) => {
  // margin每個tab之間的間距
  // textArr為所有tab的文字寬度的數(shù)組
  // preWidthArr為每一個tab與前一個tab的距離數(shù)組，第一個默認(rèn)為0
  let distanceArr = []
  let len = textArr?.length
  for (let i = 0; i < textArr?.length; i++) {
    distanceArr.unshift(preWidthArr[len - 1] + (len - 1) * margin + textArr[len - 1] / 2)
    len--
  }
  // distanceArr為每個tab居中展示時應(yīng)該設(shè)置的scroll-left值
  return distanceArr
}

// textArr[n] = 第 n - 1元素的寬度
// const widthArr = [78, 78, 78, 52, 52, 52]

// preWidthArr[n] = 第n - 1個tab距離前面tab的距離 = 元素寬 + margin
// 第一個tab沒有前面的元素
// const arr = [0, 78, 156, 234, 286, 338]

// 獲取元素信息
getElementAttr() {
        wx.createSelectorQuery()
          .in(this)
          .selectAll('.swiper-text__item')
          .boundingClientRect(res => {
            const textWidth = res?.map(item => item.width)
            const preWidth = this.getPreWidth(textWidth)
            this.distanceArr = computedPosition(MARGIN, textWidth, preWidth)
          })
          .exec()
},
getPreWidth(textWidth) {
        const arr = [0]
        for (let i = 0; i < textWidth.length - 1; i++) {
          arr.push(textWidth[i] + arr[i])
        }
        return arr
}

• 對于Content內(nèi)容區(qū)域的卡片，可以給當(dāng)前卡片與別的卡片設(shè)置不同的transfrom: scale(倍數(shù))，并且給一個過渡效果transition即可實(shí)現(xiàn)簡單的交互效果。

以上是“小程序怎么實(shí)現(xiàn)tab卡片切換功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！