<mark id="v339p"><video id="v339p"></video></mark>

    <noframes id="v339p">

            媒體閣

            您現在的位置是:首頁 > 短視頻推廣 > 正文

            短視頻推廣

            怎么刷動態評分怎么算(怎么刷動態評分安全)

            引流園2022-06-13短視頻推廣4
            怎么刷動態評分怎么算(怎么刷動態評分安全)編輯導語:排序是表格應用中常用的工具,本文作者分享了表格拖動排序的相關方法,介紹了其原理、材料
            每天被動引流300+的絕密方法,限時免費領取。添加微信:qwtg6699 ,請看這里→備注:y6
            怎么刷動態評分怎么算(怎么刷動態評分安全)

            編輯導語:排序是表格應用中常用的工具,本文作者分享了表格拖動排序的相關方法,介紹了其原理、材料準備以及交互設置的具體流程,一起來學習一下吧。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第2張

            排序是表格中常用的交互,一般常用的是升序和降序,如果要隨心所欲的設置自定義表格,按自己的偏好任意調整的,就是拖動排序了,一般在自定義表格中比較常見。所以今天作者就教大家,如何制作鼠標拖動表格中的某一行或者某一列并移動到表格中對應的位置。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第4張

            原型預覽地址:https://y3av3g.axshare.com/#g=1

            那下面我們一起開始制作吧。

            一、原理介紹

            主要用到的交互其實就是中繼器的排序事件,根據中繼器表格里面的序號排列,拖動結束后,通過更新行的操作,更新列表中對應行的序號,這樣就可以實現拖動排序的效果。

            例如列表中的第一行、第二行、第三行的序號分別為1、2、3,如果拖動第一行到最下的位置,那么他們的序號就變成3、1、2,因為排序事件拖動后就會去到最下方。

            當然了,這里還需要一些計算公式,例如計算距離,拖動多遠,去到哪里,以及序號的加減問題。我們會在下面講解交互的時候,詳細說明。

            二、材料準備

            主要材料是中繼器、動態面板、矩形元件。

            1. 表格表頭設置

            表頭其實就是用多個矩形拼在一起,需要幾列就幾個矩形。樣式根據自身需要設置即可,如下圖所示擺放:

            2. 中繼器內部元件

            中繼器里主要的元件也是和多個多個矩形拼在一起,這里的寬度要和上面表頭一樣,一一對應。如果需要移入高亮的效果,我們也可以增加一個背景矩形,設置移入時變色的交互樣式。如果要做斑馬線交互效果,也可以在中繼器樣式中設置背景顏色交替。

            元件準備好之后,我們要把中繼器里所有元件選中,右鍵轉為動態面板,因為只有動態面板才可以才可以拖動。

            3. 中繼器表格

            中繼器表格里主要分兩種列,排序列和內容列。

            排序列就是no,默認1234567順序填寫即可,不用于顯示,只用于邏輯交互。

            內容列就是column1~6,對應表格元件對應的內容。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第6張

            4. 其他元件

            這里主要是指文本標簽,只用于邏輯記錄,默認隱藏。

            三、交互設置

            1. 中繼器每項加載時

            這里我們只需要把中繼器表格里column1~6的內容,設置到中繼器里面對應的矩形即可。這里用到設置文本的交互。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第8張

            2. 中繼器載入時

            載入時,我們設置中繼器排序,讓中繼器按照no列的升序排列,這樣后續移動更新了序號后,就能自動排序了。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第10張

            3. 動態面板拖動結束時

            這里就是鼠標松開的時候,即拖動結束了。

            這里我們首先要計算移動的距離,簡單來說就是計算移動了多少格。這里我們主要用到TotalDragY函數,這個函數可以記錄拖動的垂直距離,我們用TotalDragY除以表格里面一行的高度(其實就是矩形的高度),然后四舍五入,就可以得到他移動了多少格。

            接下來我們就要分情況討論了

            1)當前序號(行數)+移動格子>中繼器可以看到的總行數。例如中繼器總共8行,你移動的是第三行,序號就是3了,移動了9格距離,加起來就是12,12大于8,相當于第三行移到了最后。那這時我們就要需改移動格數的記錄文本了,他實際上移動的格數是中繼器的中行數-他的序號,即8-3=5格,即他向下移動5格就到底了。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第12張

            2)移動格子1-當前序號(行數)。例如當前移動的是第三行,,序號就是3了,向上移動了10格,就是-10,小于1-3=-2,簡單來說就是移動到最上面的一行了。所以我們也是要修改移動格數的記錄文本了,他實際上移動的格數1-當前序號(行數),即1-3=-2格。即他向上移動2格就到頂了。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第14張

            這樣就把真實需要移動的格數修正了,接下來我們還需要根據他是向上移動還是向下移動分別寫交互。這里記錄移動格數如果是正,就是向下移動,如果是負數,就是向上移動。

            我們先來討論向下移動的情形:

            我們這里用更新行的交互,更新對應行的序號。跟新的對象(條件)是,移動行的序號+移動格子數大于等于目標行,并且目標行大于等于當前行。

            例如移動行是第三行,移動了兩格,移動行的序號+移動格子數大于等于目標行的結果為5,目標行大于等于當前行,即大于3。

            大于3小于等于5的格子就是第四行和第五航,那需要改變的其實就是45兩格。我們更新他的序號,把它變成3和4就可以,即原來的序號-1。

            除此之外,我們還要更新當前行,將他的序號更新為,當前的序號+移動的格子,即3+2=5,這樣向下移動就完成了。

            然后再來討論向上移動的情形:

            其實原理都是一樣的,首先更新目標行序號=移動行的序號,并且移動行序號+移動格數大于移動行序號。

            例如移動的是第三行,向上移動了2格,那么更新的行其實就是第一行和第二行。他們的序號從原來的1、2更新成2、3接即可,即原來的序號+1。

            除此之外,我們還要更新當前行,即移動的行,將他的序號更新為,當前的序號-移動的格子,即3-2=1,這樣向上移動也完成了。

            4. 其他交互

            其他交互,可以是美化的交互,例如想把移動效果顯示出來,那我們可以在中繼器外部增加一個動態面板,在中繼器里面動態面板移動時,即鼠標拖動某一行內容時,我們用移動的交互,讓外面的動態面板跟隨鼠標移動即可。

            這里因為我們是拖動行,所以移動時選擇跟隨鼠標垂直移動。

            當然了,我們還需要根據不同的行用設置文本的交互將表格內容傳遞出去,而且還需要在拖動開始時,用移動的交互將動態面板移動到對應行的位置。

            這些都是美化效果,不是必須的,所以在這里就不展開。

            另外,如果你們是拖動列的話就選擇水平移動,如下圖所示的效果。

            怎么刷動態評分怎么算(怎么刷動態評分安全) 第16張

            其實原理都是一樣的,只要把表格轉置一下,然后所有垂直的交互,改成水平就可以了。

            做好以后,當我們再次使用時,只需要在中繼器的表格里填寫選項即可,自動生成交互效果,是不是很方便呢?

            那以上就是本期的全部內容了,感謝您的閱讀,我們下期見~

            作者:做產品但不是經理;微信公眾號:Axure高保真原型;

            本文由 @做產品但不是經理 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

            題圖來自Unsplash,基于CC0協議。

            ? 創業項目群,學習操作 18個小項目,添加 微信:954001490  備注:小項目!


            企業微信截圖_16481820488684.png

            發表評論

            評論列表

            • 這篇文章還沒有收到評論,趕緊來搶沙發吧~
            熟妇好紧好大好多水,免费古代一看一级毛片,人禽杂交在线播放网站香港
            <mark id="v339p"><video id="v339p"></video></mark>

              <noframes id="v339p">