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

下拉刷新以及上拉滑動頁面，是每個app都具備的最基礎的交互效果，本文旨在模擬一個大概效果，細節(jié)可忽略。

操作環(huán)境

軟件版本：AXURE 8.0 中文版；

操作系統(tǒng)：win7 64位操作系統(tǒng)；
瀏 覽 ?器：Chrome?版本 63.0.3239.132（正式版本） （64 位）

實現(xiàn)步驟

元件擺放

兩層動態(tài)面板，外層動態(tài)面板是手機的可視范圍，可以理解為手機的屏幕顯示區(qū)域；

里層的動態(tài)面板是具體的頁面內(nèi)容，是需要被移動的內(nèi)容；

上下拖動

拖動外層【屏幕動態(tài)面板】時，垂直移動內(nèi)層的【內(nèi)容動態(tài)面板】，同時要設定頁面的頂部及頁面的底部邊界范圍，不能出界。

彈回效果

移動結(jié)束時，讓內(nèi)容頁面頂部彈回至與頂部菜單對齊；頁面底部彈回至與底部菜單對齊。

想看效果的，請直接拉到底部鏈接。

下面開始詳細操作過程，因為是新手入門，會講的非常細，也會稍顯啰嗦，高手請忽略。

第一步，元件擺放及動態(tài)面板嵌套

（1）拉2個矩形框，分別是頂部（命名top）和底部（命名bottom）；

（2）添加一個矩形為屏幕顯示層（設置其為動態(tài)面板，命名view），然后點擊view的state1進去，設置其為動態(tài)面版（命名content），長度隨意設置，但需要大于view的高度，這樣才有拖動的效果；

（3）最后設置content的state1（即最終看到的頁面內(nèi)容），這里隨便放2張圖片，方便演示。

每個矩形的尺寸如下：

top、bottom：（300，50）

view：（300，450）

con：（300，800）

設置完之后，回到最開始的主頁面會看到是這樣：

這是因為，內(nèi)容層默認把外圍的view層撐大了，這里需要重新調(diào)整view層的高度為最開始設置的高度，即450，同時要設置top、bot為最頂層，否則會被覆蓋。設置完之后看到的界面及頁面層級是這樣的：

第二步，設置垂直移動交互，限定邊界

頁面擺放完之后，下面開始交互。

這一步主要就是設置好頁面的上下拖動（滑動）的效果，并限制好頁面的頂部、底部邊界范圍：不能無限制的上下移動，需要給定一個限制范圍。

邏輯實現(xiàn)：

拖動view層的時候，移動con層，并設定好con移動的邊界。

具體操作：

選定view層，添加交互用例【拖動時】，添加【移動】動作，勾選con層，移動效果選擇：垂直拖動。

然后，設置界限，添加邊界。

邊界設置，依次設置頂部，底部。下面演示兩種不同的邊界效果（熟練以后，可自行設定任意邊界范圍）

第一種效果

頁面（con層）向下拖動時，頂部不能脫離top層的下邊；頁面（con層）向上拖動時，底部不能脫離bot層的上邊。因為設置邊界是通過Y坐標來實現(xiàn)的。

所以，設置邊界之前需要搞清楚元件的Y坐標是怎么回事，怎么獲取。這里先看設置操作，后面具體細講坐標。

這里的邊界設定，其實就是設置Y坐標位置。

要想頁面的頂部不能脫離top的下邊界，那么con層的Y坐標范圍需要限定在什么范圍？首先，需要搞清楚坐標原點的位置在哪里。坐標原點位置如下（紅點位置）：

那么頁面頂部的Y軸坐標只能在<0?的范圍移動（即頁面向上移動，Y坐標為負）；

同理，底部的Y坐標只能在?>view層高度?的范圍內(nèi)移動（即只能向下移動），這樣上下邊界就設定好了。

那么問題來了，view層的高度怎么獲??？

難道直接填寫高度450嗎？（本例中，view的高度是450），如果直接填寫450，效果是可以實現(xiàn)的。但如果我們修改了view的高度的話，需要重新設定邊界，這樣比較麻煩。

獲取view的高度，還有另外一個辦法，用變量和函數(shù)即可。

我們移動屏幕的時候，其實拖動的是view層，即當前操作對象是view層，所以獲取view的高度可以用 this.height 語法來表達（關于具體語法及函數(shù)，自行研究）

AXURE的函數(shù)或變量，通用格式為：

[[變量及函數(shù)]]

因此，最終的表達式可以寫成 [[this.height]] 即可。最終的設置如下：

效果預覽可自己體會。

第二種效果

頁面頂部最多可以下拉到屏幕一半的高度，底部最多可以上滑到屏幕一半的高度。根據(jù)以上的邏輯，只需要把坐標改一下即可：

頂部<=[[this.height/2]]，

底部>=[[this.height/2]]，

移動預覽截圖效果：

第三步，設置頁面上下邊界回彈的效果

針對上面第二種效果，我們來實現(xiàn)：

當頁面頂部下滑出top的下邊界時，需要回彈到top的下邊界（下拉刷新效果）；

當頁面底部上拉遠離bot上邊界時，需要回彈到bot的上邊界（我們是有底線的效果）

邏輯實現(xiàn)及交互：

我們拖動view層結(jié)束的時候，如果頁面頂部Y坐標>0，那么移動頁面頂部的Y坐標回到原點位置（0，0）（即回到top下邊界）；

同理，我們拖動view層結(jié)束的時候，如果頁面底部Y坐標<view的高度，那么移動頁面底部的Y坐標回到位置（0，view高度）（即回到bot上邊界）；

以上邏輯需要用函數(shù)來表達。

設置頂部效果

首先得出頂部的臨界值。

因為頁面頂部與con的Y坐標是一致的，此時的臨界值就是0，當它從原點（0，0）開始向下滑動時，用函表達就是：[[con.y]]>0，（con.y表示變量con的Y坐標值，也就是紅點的那個Y坐標值，需要提前定義局部變量con為con層，否則函數(shù)不能生效。）

即 如果 [[con.y]]>0，那么 移動 con層到（0，0），同時給一個動畫效果：緩慢退出。

設置底部效果

首先搞清楚的臨界值，即頁面底部與bot挨著的時候，此時，CON的Y坐標值（以原點位置開始算的）是處于最上面的隱藏看不見的位置，那么此時，con.y的值是多少呢？是 【view高度-con的高度】（為負值），如果繼續(xù)上滑的時候，Y坐標值就會小于臨界值。

表達式就是[[con.y]]<[[this.heing-con.height]]，移動con層到（0，[[this.height-con.height]]）。

最終的操作如下：

需要注意的是，用到con.y的函數(shù)時，都需要設定con為局部變量，否則無法生效。設定條件如下：

最終效果預覽如下：https://wkaay5.axshare.com。

~~~END~~~

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