本篇文章為大家展示了在Protopie中如何實(shí)現(xiàn)滑頁效果，來看看吧！

左右滑頁是手機(jī)上常用的一種交互方式，在Protopie中，我們無需任何交互配置即可實(shí)現(xiàn)滑頁效果，這完全得益于Protopie中強(qiáng)大的“滑頁容器層”。效果如下：

滑頁效果：

分別在“slide-zone”滑頁容器層內(nèi)添加“About”“Students”“Reviews”“Posts”四個(gè)滑動內(nèi)容圖層，并根據(jù)設(shè)備屏幕像素n將這四個(gè)圖層的X軸坐標(biāo)分別設(shè)置為0,n,2n,3n。（以iPhone X為例，屏幕像素為375 x 812，將四個(gè)圖層的X軸坐標(biāo)分別設(shè)置為0,375,750,1125）。

這樣，我們無需任何其他設(shè)置即可實(shí)現(xiàn)左右滑頁的效果，非常方便。

小提示：滑頁容器層有一個(gè)特性叫“反彈”，包含“彈跳”和“無效果”兩個(gè)選項(xiàng)。“彈跳”的效果是當(dāng)用戶在第一頁往前滑動或者在最后一頁往后滑動時(shí)，可以看到頁面內(nèi)容繼續(xù)拉動的效果，但是手指放開后頁面內(nèi)容會“反彈”回去?！皬椞焙汀盁o效果”的對比如下：

滑動指示塊：

為了使用戶體驗(yàn)更好，我們可以在滑頁的同時(shí)，讓Tab下面的滑動指示塊跟隨版塊內(nèi)容，同時(shí)為4個(gè)Tab添加點(diǎn)擊切換效果。

首先，我們復(fù)制3個(gè)“rectangle-select”的滑動指示塊圖層，并將它們分別移動至“Students”“Reviews”“Posts”這3個(gè)Tab的下方，記錄它們的X軸坐標(biāo)分別為114, 205, 287，刪除復(fù)制出來的3個(gè)“rectangle-select”圖層；同時(shí)我們也需要記錄初始位置X軸坐標(biāo)為29。

然后，我們添加“監(jiān)聽”觸發(fā)器，選擇“slide-zone”滑頁容器層，選擇監(jiān)聽滾頁事件；接著，我們?yōu)椤氨O(jiān)聽”觸發(fā)器添加“條件”：當(dāng)“slide-zone”“滾頁”“=”“1a數(shù)值”“375”（iPhone X的屏幕像素為375 x 812）時(shí)，將“rectangle-select”的坐標(biāo)位“移動至”X軸坐標(biāo)“114”。

照此方法，我們分別添加條件“slide-zone”“滾頁”至“750”, “1125”時(shí)，“rectangle-select”的X軸坐標(biāo)移動至“205”, “287”。當(dāng)然，千萬別忘了添加條件當(dāng)“slide-zone”的位置為“0”時(shí)，將X軸坐標(biāo)移動至“29”。

這樣，我們就可以看到Tab下方的滑動指示塊的位置會隨著下方內(nèi)容的切換而變化了。

Tab點(diǎn)擊效果：

除了手指滑頁切換Tab內(nèi)容，我們也需要添加點(diǎn)擊Tab切換相應(yīng)內(nèi)容的效果。

我們選中“About-Tab”圖層，添加“單擊”觸發(fā)器，設(shè)置“滾頁”事件為“slide-zone”“滾動至”“0”；我們還需將“About”下方的滑動指示塊“rectangle-select”移動至X軸坐標(biāo)為“29”的位置。此時(shí)，我們可以用復(fù)制的方式，將剛才設(shè)置好的“監(jiān)聽”觸發(fā)器中的移動事件復(fù)制到此處的“單擊”觸發(fā)器中。

依次為“Students-Tab”“Reviews-Tab”“Posts-Tab”圖層添加“單擊”觸發(fā)器，設(shè)置“滾頁”事件為“slide-zone”“滾動至”“375”, “750”, “1125”；依次從“監(jiān)聽”觸發(fā)器中復(fù)制“移動”事件。

完成以后，我們就可以在預(yù)覽窗中看到滑頁切換和Tab點(diǎn)擊切換同時(shí)作用的效果了。

源文件下載：slide.pie

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

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