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

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

一、UI與交互

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

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

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

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

大概就是這樣的一個(gè)交互效果啦！

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

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

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

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

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

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

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

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

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

wx.getSystemInfo({
          success: res => {
            this.marginWidth = res.windowWidth / 2 // 兩邊空白距離
          }
        })
        
        
const computedPosition = (margin, textArr, preWidthArr) => {
  // margin每個(gè)tab之間的間距
  // textArr為所有tab的文字寬度的數(shù)組
  // preWidthArr為每一個(gè)tab與前一個(gè)tab的距離數(shù)組，第一個(gè)默認(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為每個(gè)tab居中展示時(shí)應(yīng)該設(shè)置的scroll-left值
  return distanceArr
}

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

// preWidthArr[n] = 第n - 1個(gè)tab距離前面tab的距離 = 元素寬 + margin
// 第一個(gè)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ù))，并且給一個(gè)過渡效果transition即可實(shí)現(xiàn)簡單的交互效果。

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

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

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

廣告

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