小程序怎么實現tab卡片切換功能

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

一、UI與交互

首先我們來看看要實現的ui模樣和交互效果吧，下圖是我們的一個入口，以下的每一個icon區域點擊進去都會展示對應的卡片展示。

例如我點擊tab2這一個icon時，對應跳轉到如下圖所示。

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

當前激活的卡片會有一個感覺比別的卡片稍微大那么一點點的效果，且可看見前后的卡片的邊。且該卡片區域也可左右滑動實現與頭部tab欄一樣交互的效果。

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

二、實現方案的設計

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

data: [
  {
    title: 'tab2', // 標題
    logoUrl: 'xxx', // 圖標地址
    isNeed: false, // 是否需要該tab 
    id: '', // 每個tab對應的一個id,與后端交互使用
    content: '' // 每個tab對應的一些內容,用于擴展
    ...
  }
]

就是大概的這樣以上的一個數據結構。

2、在入口處點擊對應icon時可以把相對應的數組index或者id帶入詳情頁面，以實現對應的卡片展示以及對應的ui

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

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

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

• index頁面傳參我選擇傳對應的一些數據以及current值和事件處理函數

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

4、具體實現

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

wx.getSystemInfo({
          success: res => {
            this.marginWidth = res.windowWidth / 2 // 兩邊空白距離
          }
        })
        
        
const computedPosition = (margin, textArr, preWidthArr) => {
  // margin每個tab之間的間距
  // textArr為所有tab的文字寬度的數組
  // preWidthArr為每一個tab與前一個tab的距離數組，第一個默認為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居中展示時應該設置的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內容區域的卡片，可以給當前卡片與別的卡片設置不同的transfrom: scale(倍數)，并且給一個過渡效果transition即可實現簡單的交互效果。

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