我們在選擇圖片或是內(nèi)容閱覽，經(jīng)常會需要來回翻找，但是在圖片數(shù)量多的情況，容易出現(xiàn)倦怠的情緒，滑動內(nèi)容選擇器通常是一種用戶界面組件，可以幫助且方便來回翻找頁面或是圖片，提高用戶的使用體驗感，下面這篇文章是筆者整理分享的滑動內(nèi)容選擇器的知識教程，以滑動選擇電影為例子。大家一起往下看學習學習吧！

滑動內(nèi)容選擇器通常是一種用戶界面組件，允許用戶通過滑動手勢在一組內(nèi)容之間進行選擇。這種組件可以在移動應用程序或網(wǎng)頁中使用，以提供直觀的圖片選擇體驗。

那今天就教大家如何用中繼器制作一個滑動內(nèi)容選擇器，我們會以滑動選擇電影為案例，具體實現(xiàn)的效果如下：

一、效果展示

1. 可以左右拖動選擇電影，選擇對應的電影
2. 也可以通過鼠標單擊，快速選擇對應的電影
3. 選中的電影會放大，背景大圖會顯示該電影的大圖（部分）
4. 下面會回顯已選擇的電影的信息

二、制作教程

1. 圖片中繼器的設置

我們需要增加一個中繼器，在里面添加一個圖片元件和透明的矩形，如下圖所示擺放。

中繼器表格里增加一下幾列

1. no列：對應序號，按12345……順序填寫即可
2. pic列：圖片列，鼠標右鍵導入對應圖片
3. name列：對應電影名
4. score列：對應評分
5. introduce列：對應基本介紹
6. xuanzhong列：用于控制哪項被選擇，如果值等于1，就默認該行內(nèi)容被選中，一般默認第一行內(nèi)容被選中

填寫完成后，在中繼器每項加載時，我們添加交互，用設置圖片的交互，將圖片設置到中繼器里面的圖片元件。

2. 大圖的設置

我們增加一個圖片元件，寬度和沾滿手機屏幕，上面放置一層半透明的遮罩，大圖只顯示一部分內(nèi)容，即遮罩所在的區(qū)域。

在遮罩所在區(qū)域的底部居中位置，我們放置一個倒三角形，圖片移入該區(qū)域，就是選中該圖片的意思。

我們將這里面所有元件轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板才能顯示一部分內(nèi)容，而且可以寫拖動的交互。

我們在中繼器每項加載時添加條件，我們定義如果xuanzhong列的值等于1，那該部分內(nèi)容就是被選擇的，所以我們用設置圖片的交互，將符合條件的所在行pic列的圖片值設置到背景大圖里。

3. 回顯內(nèi)容的設置

我們增加兩個文本標簽，分別對應于介紹文字和電影名，如下圖所示擺放

在內(nèi)容被選擇后，我們通過設置文本的交互，將被選擇鎖在行name列的值設置到電影名的文本標簽，將introduce列和score列的值分別設置介紹的文本標簽里。

4. 選中圖片放大的交互

在內(nèi)容被選擇后，我們通過設置尺寸的的交互，將對應的圖片設置大一點，這樣就有突出選中的效果。

5. 動態(tài)面板拖動時的設置

鼠標拖動圖片區(qū)域的動態(tài)面板時，我們用移動的交互，將圖片中繼器移動，但是這里需要注意，移動的交互無法直接移動中繼器原件，所以我們可以把中繼器組合一下，然后移動中繼器組合。移動我們選擇跟隨鼠標水平移動，并且根據(jù)實際情況設置移動的邊界。

拖動結束時，我們要先判斷移動了多少格，例如一格的寬度是137，那他可能移動了200的距離那這就相當于移動了1-2格的距離，所以我們要用tofixed函數(shù)來進行四舍五入，得到一個整數(shù)的移動數(shù)。

然后我們在用移動的事件，將圖片中繼器組合移動到對應格數(shù)的位置，例如200/137=1.46，四舍五入之后其實就是移動了一格。

然后我們我們再用更新行的交互，這里移動格數(shù)和中繼器序號相等的相當于被選擇了，所以我們將他選中列的值更新為1。這里還需要考慮到的一點是，前面可以能已經(jīng)有其他行被選擇，他xuanzhong列的值已經(jīng)是1了，所以我們要用標記行的交互，先標記所有行，然后把所有行xuanzhong列的值更新為0，再執(zhí)行上述的交互。

6. 鼠標單擊圖片的交互

這里和上面的原理基本一致，但是我們就不需要計算移動了多少格，我們直接從點擊的圖片所在的行數(shù)就可以判斷了，例如第幾第三張圖片，就是要移動到第三格的位置，所以后面移動的交互，以及先標記所有行，然后把所有行xuanzhong列的值更新為0，都是和前面一樣的。

這樣我們就完成了滑動內(nèi)容選擇器_選擇電影案例的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫內(nèi)容，即可自動生成交互效果。后續(xù)我們也可以根據(jù)需要增加一些中繼器之間的聯(lián)動，例如通過是篩選事件查看對應的電影排期等效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。