微信小程序滾動Tab實現(xiàn)左右可滑動切換

江達網站建設公司創(chuàng)新互聯(lián),江達網站設計制作，有大型網站制作公司豐富經驗。已為江達成百上千提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的江達做網站的公司定做！

效果：

最終效果如上。問題：

1、tab標題總共8個，所以一屏無法全部顯示。
2、tab內容區(qū)左右滑動切換時，tab標題隨即做標記（active）。
3、當active的標題不在當前屏顯示時，要使其能顯示到當前屏中。

一、wxml結構

tab標題因一排八個，所以使用 scroll-view組件，使其可橫向滾動。

tab內容可左右滑動切換，使用swiper組件實現(xiàn)

為了偷懶，所以數據都通過wx:for遍歷重復出來。

說明：

1、設置data-current屬性用于：點擊當前項時，通過點擊事件swichNav中處理e.dataset.current取到點擊的目標值。
2、swiper組件的current組件用于控制當前顯示哪一頁
3、swiper組件綁定change事件switchTab，通過e.detail.current拿到當前頁

  
    健康
    情感
    職場
    育兒
    糾紛
    青蔥
    全部
    其他
  
  
    
      
        
          
            
              
            
            
              歡顏
              知名情感博主
              134個回答，2234人聽過 
            
            問TA 
          
        
      
    
  

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：微信小程序滾動Tab實現(xiàn)左右可滑動切換-創(chuàng)新互聯(lián)
網頁URL：http://weahome.cn/article/dscioo.html