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

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

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

一、效果展示

1. 可以左右拖動(dòng)選擇電影，選擇對(duì)應(yīng)的電影
2. 也可以通過鼠標(biāo)單擊，快速選擇對(duì)應(yīng)的電影
3. 選中的電影會(huì)放大，背景大圖會(huì)顯示該電影的大圖（部分）
4. 下面會(huì)回顯已選擇的電影的信息

二、制作教程

1. 圖片中繼器的設(shè)置

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

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

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

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

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

2. 大圖的設(shè)置

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

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

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

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

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

我們?cè)黾觾蓚€(gè)文本標(biāo)簽，分別對(duì)應(yīng)于介紹文字和電影名，如下圖所示擺放

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

4. 選中圖片放大的交互

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

5. 動(dòng)態(tài)面板拖動(dòng)時(shí)的設(shè)置

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

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

然后我們?cè)谟靡苿?dòng)的事件，將圖片中繼器組合移動(dòng)到對(duì)應(yīng)格數(shù)的位置，例如200/137=1.46，四舍五入之后其實(shí)就是移動(dòng)了一格。

然后我們我們?cè)儆酶滦械慕换?，這里移動(dòng)格數(shù)和中繼器序號(hào)相等的相當(dāng)于被選擇了，所以我們將他選中列的值更新為1。這里還需要考慮到的一點(diǎn)是，前面可以能已經(jīng)有其他行被選擇，他xuanzhong列的值已經(jīng)是1了，所以我們要用標(biāo)記行的交互，先標(biāo)記所有行，然后把所有行xuanzhong列的值更新為0，再執(zhí)行上述的交互。

6. 鼠標(biāo)單擊圖片的交互

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

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

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