中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章為大家展示了在Protopie中如何實現滑頁效果，來看看吧！

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

滑頁效果：

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

這樣，我們無需任何其他設置即可實現左右滑頁的效果，非常方便。

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

滑動指示塊：

為了使用戶體驗更好，我們可以在滑頁的同時，讓Tab下面的滑動指示塊跟隨版塊內容，同時為4個Tab添加點擊切換效果。

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

然后，我們添加“監聽”觸發器，選擇“slide-zone”滑頁容器層，選擇監聽滾頁事件；接著，我們為“監聽”觸發器添加“條件”：當“slide-zone”“滾頁”“=”“1a數值”“375”（iPhone X的屏幕像素為375 x 812）時，將“rectangle-select”的坐標位“移動至”X軸坐標“114”。

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

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

Tab點擊效果：

除了手指滑頁切換Tab內容，我們也需要添加點擊Tab切換相應內容的效果。

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

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

完成以后，我們就可以在預覽窗中看到滑頁切換和Tab點擊切換同時作用的效果了。

源文件下載：slide.pie

本文由 @ROGER 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議