概念
- Affecter 影響者 : 用于根據(jù)子元素與其與特定1個或者多位置的距離對子元素設置樣式;
- AffectedItem 影響項目 : Affecter 所展示的內(nèi)容的基本單位绢记，也是被影響的對象翻斟；
- affectAnchor 影響錨點 : 影響 item 的點；
- itemAnchor 項目錨點 : 項目的錨點律胀；
類型表示規(guī)則
ScaleNumber : 表示比例的數(shù)字類型；
Coord = {x:number,y:number} : 表示坐標的類型
Size = {width:number,height:number} : 表示尺寸的類型
Rect = {x:number,y:number,width:number,height:number} : 表示矩形的類型
Element : 原生Dom元素
RowCol = {row:number,col:number} : 表示行列號的類型
Style : React樣式對象類型
CalssName : React的calssName的類型
Affecter 影響者
props
affectAnchors
- 類型: [Coord]?
說明
affectAnchors中的元素表示影響錨點在Affecter的視口上的偏移坐標疑苔；
坐標的單位由 usePixelCoordInAffecter 決定占业；
usePixelCoordInAffecter
- 類型: boolean?
說明
表示affectAnchors中的坐標單位是否是像素；
當為 true 時造虎，affectAnchors 中坐標單位是像素；
當為 false 或者未定義時纷闺，affectAnchors 中坐標單位是偏移像素相對于 Affecter 寬度和高度的比例算凿； 即： x 表示 影響錨點在X軸方向上相對于Affecter的寬度的偏移比例，y 表示 影響錨點在Y軸方向上相對于Affecter的高度的偏移比例犁功；
itemAnchor 項目錨點
- 類型: {x:ScaleNumber,y:ScaleNumber}
- 默認值: {x:0.5,y:0.5}
說明
表示 項目錨點 在 項目視口上的 偏移坐標氓轰，用于計算與影響錨點之間的距離；單位是：偏移像素相對于項目寬高的偏移比例浸卦；
transforms
- 類型: [ (distance:Coord,index:number,distanceArr:[Coord],itemRect :Rect,itemElement?:Element,containerElement?:Element)=>Coord ]?
說明
轉換函數(shù)數(shù)組署鸡，里面包含的函數(shù)是用來轉換項目元素的錨點與影響錨點之間的距離坐標，并返回轉換后的距離坐標對象限嫌；
getItemAffectStyle
- 類型: (distanceArr : [Coord],itemElement : Element?,containerElement : Element?,itemRowCol:{row:number,col:number,index:number},itemRect:Rect)=>Style
說明
獲得項目影響樣式的回調(diào)函數(shù)靴庆；
getItemInitStyle
- 類型 : (element,index,computeAffectStyleForItem : (itemElement : Element ?, orItemRect : Rect ?)=>Style )=>Style ?
說明
獲得元素的初始樣式（比如：用于布局的樣式）的回調(diào)函數(shù)，在Affecter的props更新時為每個元素調(diào)用怒医；
wrapChildren
- 類型: boolean?
說明
表示是否包裝子元素炉抒；
wrapClass
- 類型: CalssName?
說明
定義包裝元素的類
wrapStyle
- 類型: Style?
說明
定義包裝元素的樣式
loopType
- 類型: "Hor" | "Ver" | "All" | "false" ?
說明
定義循環(huán)類型
wrapSpace
- 類型: number?
- 默認值: 0
說明
定義循環(huán)包之間的間隔；
onScroll
- 類型: Function ?
說明
Affecter 的滑動事件處理函數(shù)稚叹；當返回 true 值時焰薄，不會執(zhí)行 Affecter 的默認操作；
計算循環(huán)(ComputeLoop)獨有的Props
ItemType
- 類型: ReactComponent
說明
計算循環(huán)的項目類型扒袖，必須是由工廠函數(shù) computeLoopItemTypeCreater 創(chuàng)建的類型塞茅；
itemDataArr
- 類型: Array
說明
計算循環(huán)的項目的數(shù)據(jù)數(shù)組
itemSize
- 類型: Size
- 說明: 項目的尺寸
horSpace
- 類型: nunber
- 說明: 項目間的水平間距
verSpace
- 類型: number
- 說明: 項目間的垂直間距
itemDataArr
- 類型: Array
- 說明: 項目的數(shù)據(jù)數(shù)組
roundRowCount
- 類型: number
- 說明: 單個循環(huán)周期內(nèi)的行數(shù)；
roundRowCount和roundColCount中只需設置其中一個季率，當這兩個prop都被設置時野瘦，會忽略roundColCount的設置；
roundColCount
- 類型: number
- 說明: 單個循環(huán)周期內(nèi)的列數(shù)蚀同；
roundRowCount和roundColCount中只需設置其中一個缅刽，當這兩個prop都被設置時，會忽略roundColCount的設置蠢络；
AffectedItem 影響者的項目
props
以下props是由使用者來定義
renderAll
- 類型: boolean ?
說明
每次刷新是否渲染所有元素衰猛，默認是否，只渲染 渲染矩形 內(nèi)的元素刹孔；
以下props由Affecter組件負責傳送啡省，用戶不用傳送
computeAffectStyleForItem
- 類型: (itemElement : Element ?, orItemRect : Rect ?)=>Style
- 說明: 計算元素被影響的樣式
itemIsInRenderRange
- 類型: (itemElement : Element)=>boolean
- 說明: 用于判斷該元素是否在渲染矩形內(nèi)娜睛；
使用說明
AffectedItem 組件專門用作 Affecter 組件的子組件，使用格式為：
<Affecter>
<AffectedItem>
<p>郭斌勇</p>
</AffectedItem>
</Affecter>
您也可創(chuàng)建自己的AffectedItem組件卦睹，只需要在需要設置樣式時通過 this.props.computeAffectStyleForItem 函數(shù)獲取新的樣式即可畦戒；
工具函數(shù)
computeLoopItemTypeCreater(ItemContentType)
- @param ItemContentType : Component 組件
- @returns : Component 可以作為計算循環(huán)模式下的 Affecter 的 item 的組件類；
說明
生成可以作為計算循環(huán)模式下的 Affecter 的 item 的組件類结序； ItemContentType 的實例會收到以下 prop：
- row 當前 item 的行號
- col 當前 item 的列號
- itemIndex 當前 item 的項目序號
- itemData item 的數(shù)據(jù)
行號障斋、列號是 計算循環(huán)為 項目設計的網(wǎng)絡坐標，每個網(wǎng)格對應一個項目的位置徐鹤；
項目序號 表示的是項目在計算循環(huán)的循環(huán)單元（循環(huán)周期）內(nèi)的序號垃环；所以如果2個item的 itemIndex 相同，則它們接收的 itemData 也是相同的返敬；
性能優(yōu)化相關的props
throttleDelay
- 類型: number ?
- 默認值: 40
說明
節(jié)流閥體的時間限遂庄，即該數(shù)值表示多長時間內(nèi)不允許觸發(fā)第2次更新
throttleStep
- 類型: number ?
- 默認值: 2
說明
節(jié)流閥體的步長限，即該數(shù)值表示多長的滑動距離才能觸發(fā)第2次更新
renderExtendRadius
- 類型: number ?
說明
項目的渲染范圍的擴展半徑劲赠；
