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

本文介紹了banner高亮圓點(diǎn)的優(yōu)化處理方法，供大家參考學(xué)習(xí)，enjoy~

回想一下，你實(shí)現(xiàn)的banner圖切換時(shí)，圓點(diǎn)高亮的交互效果是不是跟下面類似，出現(xiàn)圓點(diǎn)組跟隨圖片一起向左滑動(dòng)的情況，看起來很不協(xié)調(diào)。

是不是在每一個(gè)state中都添加了一組圓點(diǎn)的方法，頁面如下：

其實(shí)，正確且簡潔的做法應(yīng)該如下：

一、頁面布局

從左側(cè)元件庫拉入一個(gè)【橢圓形】作為【高亮圓點(diǎn)】并復(fù)制3個(gè)，拉入一個(gè)【動(dòng)態(tài)面板】作為【banner】，如下：

雙擊【banner】動(dòng)態(tài)面板，再添加3個(gè)【state】狀態(tài)，點(diǎn)擊進(jìn)入對(duì)應(yīng)的狀態(tài)面板編輯添加圖片，如下：

二、添加交互

1. 設(shè)置圓點(diǎn)高亮的交互

同時(shí)選中四個(gè)【圓點(diǎn)】，右鍵，點(diǎn)擊【設(shè)置選項(xiàng)組】。

（目的：是為了讓所有元件為單選形式，即點(diǎn)擊選中其中一個(gè)，其它元件則為不選中）。

同樣，選中其中的【交互樣式】，添加【選中】的交互樣式，如下：

接下來，需要實(shí)現(xiàn)點(diǎn)擊某個(gè)【圓點(diǎn)】則切換到對(duì)應(yīng)的banner頁面。即給每一個(gè)圓點(diǎn)添加【鼠標(biāo)單擊時(shí)】事件。

選擇左側(cè)的【元件】-》【設(shè)置面板狀態(tài)】-》勾選【banner】面板-》選擇狀態(tài)值【state1】（第幾個(gè)圓點(diǎn)即選擇第幾個(gè)狀態(tài)），進(jìn)入出動(dòng)畫為【向左滑動(dòng)】500毫秒，設(shè)置如下：

2. 設(shè)置動(dòng)態(tài)面板【banner】的交互

給動(dòng)態(tài)面板添加【載入時(shí)】事件，實(shí)現(xiàn)自動(dòng)切換頁面。

選擇左側(cè)的【元件】-》【設(shè)置面板狀態(tài)】-》勾選【當(dāng)前元件】-》選擇狀態(tài)值【next】，勾選【向后循環(huán)】，勾選【循環(huán)間隔】2000毫秒，勾選【首個(gè)狀態(tài)….】，進(jìn)入出動(dòng)畫為【向左滑動(dòng)】500毫秒，設(shè)置如下：

三、交互細(xì)節(jié)調(diào)整

1. 初始加載頁面時(shí)，首先是展示第一個(gè)頁面【state1】，因此，需要將第一個(gè)【圓點(diǎn)】設(shè)置為【選中】狀態(tài)。

2. 當(dāng)banner切換頁面，對(duì)應(yīng)的【圓點(diǎn)】需要高亮，因此，給【banner】動(dòng)態(tài)面板添加【狀態(tài)改變時(shí)】的交互事件，如下：

選擇左側(cè)的【元件】-》【設(shè)置選中】-》勾選【圓點(diǎn)1】-》狀態(tài)值【true】。

點(diǎn)擊【編輯條件】，設(shè)置面板狀態(tài)為state1時(shí)，即選擇圓點(diǎn)1，如下：

同理，依次添加另外3個(gè)事件，不同狀態(tài)條件則選中不同的圓點(diǎn)高亮，如下：

3. 當(dāng)點(diǎn)擊【圓點(diǎn)】切換頁面后，會(huì)出現(xiàn)banner圖不會(huì)繼續(xù)自動(dòng)切換的情況。

因此，還需要給每個(gè)圓點(diǎn)的【鼠標(biāo)點(diǎn)擊時(shí)】事件后面再添加【等待】事件，值100毫秒。

最后，再添加【觸發(fā)事件】-》勾選【banner】面板-》勾選【載入時(shí)】事件，如下：

四、預(yù)覽效果

歡迎大家留言評(píng)論，也可以留下你期待看到的交互效果。

示例下載：

https://pan.baidu.com/s/17vOyA4hBwMfv1p_f0DFjxA

提取碼： ryg6

示例演示：

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

題圖來自Unsplash，基于CC0協(xié)議