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

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

創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)深耕10余年，專業(yè)且經(jīng)驗豐富。10余年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為上千多家中小企業(yè)提供了成都網(wǎng)站制作、網(wǎng)站建設解決方案，按需網(wǎng)站建設，設計滿意，售后服務無憂。所有客戶皆提供一年免費網(wǎng)站維護!

一、UI與交互

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

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

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

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

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

二、實現(xiàn)方案的設計

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

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

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

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

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

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

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

• index頁面?zhèn)鲄⑽疫x擇傳對應的一些數(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、具體實現(xiàn)

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

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

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

網(wǎng)站標題：小程序怎么實現(xiàn)tab卡片切換功能
瀏覽地址：http://bm7419.com/article44/ipdche.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、Google、全網(wǎng)營銷推廣、虛擬主機、App設計、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)