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

本文為大家分享了如何使用條件函數，使窗口在滾動到不同位置的時候，頂部的導航欄定位到不同的位置，enjoy！

先上效果

這次分享如何使用條件函數使窗口在滾動到不同位置的時候，頂部的導航欄定位到不同的位置，以起到引導用戶快速定位到不同分類的作用，這種實現方式在電商以及外賣類型的產品中居多，這里我參考了部分平臺的內容，制作了一個簡易的版本為大家講解下如何實現。

首先來理一下這個效果實現的思路：

• 導航欄有兩種狀態，顯示以及隱藏，在滑動到特定位置的時候，觸發導航欄顯示或隱藏；
• 導航欄在顯示的狀態時，必須固定到一個不變的位置；
• 導航欄分類具有兩個狀態，選中和未選中，當商品菜單滑動到特定位置時，對應的分類顯示為選中。

01

根據該效果圖準備以下元件，并擺放好對應的位置，也可以根據自己情況增減，不需要花太多時間在這部分內容上，重要的是理解實現原理。

需要我的RP文件的可以在公眾號后臺回復關鍵詞“吸附”。

02

• 拖入兩個動態面板，分別命名為：【導航欄】和【內容框架】；
• 上圖中手機外框的母版在最底層，【內容框架】在母版上層，【導航欄】在【內容框架】上層；

• 將動態面板【導航欄】設置為“隱藏”，設置完呈現為黃色；
• 設置該動態面板固定到瀏覽器，位置為當前你操作時擺放的位置；

• 隨后雙擊動態面板【導航欄】，在‘State1’中將之前準備的四個文本標簽擺放至合適位置；

• 選中全部文本標簽，設置”選中時”的文字和填充色改變為不同顏色；

3

• 點擊【內容框架】動態面板，將其設置為可以’縱向滾動’；
• 隨后雙擊該動態面板，進入‘State1’；

• 在動態面板內點擊任意空白位置，雙擊“滾動時”為其添加‘Case1’；

• 先為‘Case1’添加條件，判斷值為:[[This.scrollY]] >= 160。（注意160為我當前操作的位置，你們隨意）；

• 然后添加符合設定的條件時的動作為顯示【導航欄】。

04

• 繼續為“滾動時”添加‘Case2’；
• 設定如果不滿足‘Case1’設定的條件為隱藏【導航欄】；

• 為“滾動時”添加第三個‘Case3’，設定條件與‘Case1’中的相同，但指向的值為[[chaozhi.top]]，這里的‘chaozhi’是通過添加局部變量而來的，具體操作如上圖；
• 完成條件設定后，設置符合該條件時執行的動作為：選中動態面板【導航欄】中的‘超值套餐’這個元件；
• 然后右鍵單擊‘Case3’將“Else If”轉換為“If”。（思考下這里為什么要這樣）；

5

• 隨后的Case4、Case5、Case6都進行相應的條件判斷和執行動作設置；
• 在Case7中，則設定條件為不滿足Case3、Case4、Case5、Case6，執行動作為選中“折扣”元件；
• 所有【內容框架】的交互事例設置如上圖。

到這里整個制作過程就結束了，這個案例中主要的難點在于對函數的理解。如果能夠理解函數的設定，可以在這個基礎上增加點擊導航欄中的文本標簽然后移動到相應的商品位置的效果，或者再進階一步對導航欄進行滑動等效果。大家可以自行嘗試，遇到問題歡迎一起來交流討論。

End

（收藏文章，不怕找不到?）

作者：杰森，公眾號：十八般產品

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

題圖來自Unsplash，基于CC0協議