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

今天我們以騰訊新聞為例，講一下如何做出app內頻道自主增減的效果。

新聞類app由于內容的原因，一般會分為很多的閱讀頻道，比如：要聞、娛樂、體育、金融等等，用戶可根據自己的興趣增減所需的頻道。

具體效果看GIF圖：

交互要點

1. “我的頻道”，“精選頻道”的頻道可以彼此互為增減；
2. “我的頻道”中，“要聞”頻道，為系統固定第一位頻道，不能增刪改動，以藍字凸顯；
3. “我的頻道”中，長按每個頻道，會激活左上角關閉按鈕×；
4. “我的頻道”中，伴隨頻道增減，下方的元件位置，會自動下移和上調；
5. “我的頻道”中，單擊左上角關閉按鈕×，會將相應頻道退回到下方精選頻道中，并自動排在首位；
6. “精選頻道”中，點擊任意頻道，自動在“我的頻道”添加對應頻道，并且自動排至最后；
7. 點擊編輯按鈕時，我的頻道中的頻道標簽左上角會出現關閉按鈕×；
8. 當編輯按鈕的文字為“編輯”時，新增到我的頻道中的頻道標簽不顯示關閉按鈕×，反之，當編輯按鈕文字為“完成”時，新增到我的頻道中的頻道標簽顯示關閉按鈕×。

具體制作過程

本文重點講解中繼器的應用場景，故上述gif圖中的，頁面跳轉交互，比較簡單，就不贅述了，下面主要講解頻道增減頁的制作。

第一步：頁面元件準備

第二步：我的頻道中繼器mychannel制作和部分交互

中繼器元件布局及數據集制作：數據樣式為水平排列，每排4列。

交互：

解釋：

載入時：添加排序，按number列的數值升序排列；

每項加載時：case1 設置上文提到的圓角灰色矩形channel name綁定數據集item.channel數據。

case1中的后面的兩個交互，后面會講到，這里先不提。

每項加載時case2：if “[[Item.index]]” == “1”指定中繼器第一行數據，本例中即指定“要聞”頻道。下圖中紅圈部分，設定文字為富文本，在富文本對話框中，將函數選中，選擇藍色即實現“要聞”頻道藍字凸顯。

每項加載時case3、case4：if “[[Item.close]]” == “0”時，close列為0時，設置上述關閉按鈕“×”close為隱藏，反之，if “[[Item.close]]” == “1”，設置上述關閉按鈕“×”close為顯示。

第三步：jx頻道中繼器jxchannel制作和部分交互

中繼器元件布局及數據集制作：數據集一共28行，數據樣式為水平排列，每排4列。

交互：

解釋：

載入時：添加排序，按number2列的數值升序排列。

每項加載時：case1設置上文提到的圓角灰色矩形jx綁定數據集item.channel2數據。

case1中的后面的一個交互，后面會講到，這里先不提。

———————————到這步，中繼器自身的構建基本完畢——————————

第四步：兩個中繼器之間的數據傳遞交互

（1）在頁面的“編輯”按鈕添加交互

解釋：

鼠標單擊時case1?if 文字于 This == “編輯”，即如果編輯按鈕的文字為“編輯”時。

當點擊時，文字由“編輯”變為“完成”。

同時，我的頻道中繼器mychannel的頻道數據中，除了第一行“要聞”，其他頻道條目的左上角，都會出現關閉按鈕“×”。

鼠標單擊時case2?if 文字于 This == “完成”，即如果編輯按鈕的文字為“完成”時。

當點擊時，文字由“完成”變為“編輯”。

同時，我的頻道中繼器mychannel頻道數據中，頻道條目的左上角的關閉按鈕“×”全部隱藏。

————————————到這步，編輯按鈕的交互完畢———————————

（2）接下來我們先添加一個全局變量mychanneldatacount，并且在我的頻道中繼器mychannel中添加交互：在mychannel每項數據加載時，全局變mychanneldatacount的值為[[Item.Repeater.dataCount]]即中繼器數據總數。

（3）在精選頻道中繼器jxchannel中，選中圓角灰色矩形jx，添加交互。

解釋：鼠標單擊圓角灰色矩形jx時，Case1if 文字于 bianji == “編輯”，如果編輯按鈕的文字形態為編輯時，點擊精品頻道中繼器jxchannel中的頻道條目，就在我的頻道mychannel中就添加相應的條目。

添加number列為[[mychanneldatacount+1]]即新增的數據，number為現有數據+1，按number升序排序時，新增條目排在最后。

添加close列值為0，即不顯示左上角的關閉按鈕“×”。

接下來，當精選頻道中的各個頻道標簽被點擊后，在mychannel中繼器中增加相應條目，而在精選頻道jxchannel中繼器中，要減少相應條目，需更新number2數值，且做升序排列。

更新jxchannel中繼器相應數據，更新條件為[[TargetItem.number2>Item.number2]]即排在該條目后面的數據行。

更新列為number2，更新為[[TargetItem.number2-1]]，即將后續數據的number2都提前一位。

最后，刪除本行。

（4）接下來，按同樣的方法，設置當鼠標單擊圓角灰色矩形jx時，Case2 if 文字于 bianji == “完成”時的交互，交互動作和上述一樣，唯一不同的在于當編輯按鈕文字為“完成”時，點擊jx上傳到mychannnel中的新條目的左上角關閉按鈕“x”都顯示。

（5）我們再添加一個全局變量jxdatacount，并且在精選頻道中繼器jxchannel中添加交互：在jxchannnel每項數據加載時，全局變jxdatacount的值為[[Item.Repeater.dataCount]]即中繼器數據總數。

（6）現在，我們來做mychannel中繼器中的關閉按鈕“×”close的交互。

解釋：當點擊關閉按鈕時，被關閉的頻道標簽要自動遷移到jxchannel中繼器中，并排在首位。所以首先先將jxchannel中的現有數據的number2都+1。

然后在jxchannel中添加行，并將其排在首位。

接下來，因為mychannel中繼器中即將少一個頻道數據，所以要將其后續條目的number列減1。

最后刪除該條目。

—————————到這步，兩個中繼器之間的數據傳遞交互完畢—————————

第五步：兩個中繼器之間的位移

當我的頻道mychannnel增加條目時，精選頻道會下移；

當我的頻道mychannnel減少條目時，精選頻道會上移。

（1）將精選頻道，和頁面中部的圖片組合

（2）我們在頁面中，拖入一個文本框yidong1，并設置為隱藏。

（3）為文本框yidong1賦值，在mychannel中繼器中的每項加載時，設置yidong1的文字為全局變量mychanneldatacount，即mychannel的數據總量。

（4）讓文本框yidong1的值來決定兩個中繼器在位置上的彼此影響。

在中繼器mychannel中的關閉按鈕“×”close加入交互case2。

因為mychannel中的數據為4個一排，所以當點擊關閉按鈕，數據減少到為4的倍數時，中繼器尺寸就會變小，所以條件設置為：if “[[LVAR1%4]]” == “0”，LVAR1為yidong1文本框文字。即當mychannel數據總量能被4整除時，移動下方的原件上移55個y坐標。

接下來在中繼器jxchannel中的灰色圓角矩形jx加入交互case3。

同理因為mychannel中的數據為4個一排，所以當點擊精選頻道的頻道標簽時，mychannel的數據增加到為“4的倍數多1時”，中繼器尺寸就會變大。所以條件設置為：if “[[(LVAR1-1)%4]]” == “0”，LVAR1為yidong1文本框文字，即當mychannel數據總量只要減1就能被4整除時，移動下方的原件下移55個y坐標。

—————————到這步，兩個中繼器之間的位移交互完畢—————————

最后就剩一個交互效果，即長按mychannel中的頻道標簽，會自動切換到編輯狀態，即左上角的關閉按鈕×出現。

即在mychannel中繼器中，選中灰色圓角矩形channelname，在鼠標長按時，觸發編輯按鈕的鼠標單擊時交互，即可。

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

題圖來自 Pexels，基于 CC0 協議