本文為我們介紹了自制橫向滾動(dòng)條的三個(gè)步驟，以及其中的注意要點(diǎn)。更多詳細(xì)內(nèi)容請(qǐng)見正文~

一般如果我們需要使用橫向滾動(dòng)條，會(huì)直接使用動(dòng)態(tài)面板提供的橫向滾動(dòng)條。由于橫向滾動(dòng)條在動(dòng)態(tài)面板的最底部，這就有個(gè)前提，就是動(dòng)態(tài)面板必須全部展示在可視范圍內(nèi)，橫向滾動(dòng)條才可以使用。那當(dāng)動(dòng)態(tài)面板提供的橫向滾動(dòng)條無法使用時(shí)，我們?nèi)绾巫灾埔粋€(gè)橫向滾動(dòng)條？

比如當(dāng)我們實(shí)現(xiàn)如下的效果時(shí)，由于表格左側(cè)固定，當(dāng)表格數(shù)據(jù)過多時(shí)，無法使用表格的內(nèi)滾動(dòng)達(dá)到想要的效果，這個(gè)時(shí)候就需要自制一個(gè)橫向滾動(dòng)條。

自制橫向滾動(dòng)條，主要分為三步：

1. 創(chuàng)建需要滾動(dòng)的動(dòng)態(tài)面板（即此處示例的表格）
2. 自制橫向滾動(dòng)條
3. 通過拖拽滾動(dòng)條，移動(dòng)動(dòng)態(tài)面板中的內(nèi)容

一、創(chuàng)建動(dòng)態(tài)面板（即此處示例的表格）

1. 創(chuàng)建「表格內(nèi)容」(由于后面需整體控制表格內(nèi)容的移動(dòng)，可將表格內(nèi)容轉(zhuǎn)為動(dòng)態(tài)面板或群組)。

2. 將表格內(nèi)容轉(zhuǎn)為動(dòng)態(tài)面板「表格」，且使用橫向滾動(dòng)條，并將動(dòng)態(tài)面板本身提供的滾動(dòng)條隱藏掉。

（可將 此動(dòng)態(tài)面板再轉(zhuǎn)為動(dòng)態(tài)面板，然后通過將滾動(dòng)條顯示在最外層動(dòng)態(tài)面板的外面，實(shí)現(xiàn)滾動(dòng)條的隱藏）

二、自制橫向滾動(dòng)條

1. 創(chuàng)建「橫向滾動(dòng)條」

2. 現(xiàn)實(shí)中，滾動(dòng)條的大小不是固定的，是根據(jù)表格內(nèi)容 動(dòng)態(tài) 計(jì)算的。

首先我們需要知道滾動(dòng)條的寬度計(jì)算方式，如下圖：

當(dāng)加載滾動(dòng)條時(shí)，可根據(jù)此公式設(shè)置寬度：

3. 將「橫向滾動(dòng)條」轉(zhuǎn)為動(dòng)態(tài)面板「滾動(dòng)條」，以便實(shí)現(xiàn)滾動(dòng)條的拖拽。

4. 設(shè)置「滾動(dòng)條」的拖拽

(1)創(chuàng)建「滾動(dòng)條背景」，寬度為「滾動(dòng)條」的可拖拽范圍。

(2)「滾動(dòng)條」拖拽時(shí)，左側(cè)限制為背景的X坐標(biāo)，右側(cè)為背景的X坐標(biāo)加背景的寬。

三、拖拽滾動(dòng)條時(shí)，移動(dòng)表格內(nèi)容

我們發(fā)現(xiàn)往右拖拽滾動(dòng)條時(shí)，表格內(nèi)容會(huì)往左走，所以二者為相反數(shù)。

具體公式如下：

則拖動(dòng)滾動(dòng)條時(shí)，表格內(nèi)容的X坐標(biāo)設(shè)置如下：

至此，通過以上三步，一個(gè)自制的橫向滾動(dòng)條已基本實(shí)現(xiàn)。

由于示例中牽扯的元件過多，大家可通過下載源文件查看具體的實(shí)現(xiàn)方法。另外，此案例同時(shí)示例了，「當(dāng)表格滾動(dòng)時(shí)，如何將表格的表頭吸附到頂部」，有需要的小伙伴可進(jìn)行參考。

文件地址：https://pan.baidu.com/s/10qSilLkkbzDT54eaWbPNRQ

本文由 @冬瓜一號(hào) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議