主要原理：使用 <swiper> 和 <scroll-view> 組件
代碼片段： https://developers.weixin.qq.com/s/mLx4FWmF757Z
GitHub: github.com/WozHuang/Miniprogram-Demo

小程序是輕量級的app，本應小巧精悍、用完即走，但是很多企業還是想要在這輛自行車上裝發動機，要求擁有原生APP的操作體驗。作為一介碼農也只能默默想辦法實現了，總不能說這東西我不想做吧

有興趣可以在Github看看另外幾個需求實現

效果圖

這次要實現的是在APP中常見的多TAB滑動切換功能，沒有什麽可介紹的，直接上成果圖：

本來如果在web端上實現，直接去找現成的輪子使用就可以了（避免重復造輪子，而且我造的輪子也不見得有別人的好）

奈何小程序與web還有些區別，現成的輪子都用不上，還是只能自己動手造一個了。幸運的是小程序自帶的部分組件也能用得上，不用從頭開始造。

組件結構

<page>
    <bar />             // 頂部的tab選擇器
    <swiper>            // 能夠左右滑動的swiper組件
        <list>          // 某一個tab的列表
            <item />    // 數據項
            ...
        </list>
        ...
    </swiper>
</page>
 

組件結構也並不復雜，這樣層層嵌套只是為了保證組件各司其職、利於維護

所利用的屬性：

1. swiper
   • 可以左右滑動
   • 通過current屬性切換到指定的項
   • 監聽手動滑動的change事件
2. scroll-view
   • 用 scroll-into-view 屬性滑動到指定的位置
   • scroll-with-animation="{{true}}" 平滑滾動
   • duration="{{200}}" 屬性指定動畫時長

存在的不足

1. 從第一項切換到第三項時swiper會 1 -> 2 -> 3 的順序切換，似乎沒有直接切換的辦法（設置swiper的duration屬性為0可以瞬間切換，但是滑動的效果會變得奇怪）
2. 切換動畫偶爾會掉幀，原因未知，優化方式未知

小程序做一個能夠左右滑動切換的多tab頁面