掌握這個技術，給輪播圖和文本插上自由之翼
組件間通信技術如何賦能輪播圖和文本
圖片
上圖畫布中有兩個組件: 輪播圖 和 文本組件. 我們可以在圖中看到當輪播圖組件內容切換時, 文本組件內容也會對應的切換. 熟悉前端開發的小伙伴也許會覺得這樣的功能很好實現, 我們可以用諸如 react, vue 這樣的框架來輕松實現數據狀態的共享, 但是通過傳統的組件開發方式來實現這樣的功能, 存在太多的局限性, 比如:
1. 輪播圖組件的圖片和文本的位置相對比較固定, 不夠靈活
我們一般的輪播圖組件長這樣:
圖片
一般輪播圖文案會放在圖片中間或者底部, 如果產品經理或者設計師小朋友想調整文本的位置, 比如以下幾種:
左圖右文(或右圖左文)排版:
圖片
輪播文本出現在左上方:
圖片
上圖下文的輪播圖排版:
圖片
面對這些花里胡哨的排版設計, 傳統做法只能通過程序員不斷修改或者擴展代碼,才能實現這些的需求.
2. 上線成本高, 不夠敏捷
這里的“成本”并不是組件的修改成本高, 因為改變位置對程序員來說都是小意思, 這里的成本指的是時間成本. 因為網站上線會涉及一系列的準備工作, 比如代碼修改, 代碼提交, 代碼測試, 最終再把網站上線.
圖片
同時花大部分時間做一些低價值的任務, 對程序員自身成長也不友好, 所以我們需要思考更優雅的方式.
3. 樣式設計的局限性較大
比如我們要實現帶背景的輪播圖文案, 如果按照老路子開發, 程序員又得嘩嘩寫代碼了.
輪播圖這類對外展示信息的需求, 雖然大多不是企業的核心需求, 但是某些時候卻對企業的形象和企業價值傳遞至關重要, 所以我們必須要及時響應需求的變化, 第一時間維護公司的形象.
怎么去做呢? 我的答案是: 讓產品經理和設計師們自己去維護輪播圖組件.
解決方案演示
- 解決輪播圖組件圖片和文本的位置相對比較固定, 不夠靈活的問題
圖片
圖片
- 解決輪播文本樣式的局限性
圖片
輪播文案動畫效果:
圖片
輪播和文案分離的課件式交互:
圖片
當然還有很多玩法等待大家開啟, 如果我們把這個功能嫁接給產品或者業務人員, 那么將極大的解放程序員的雙手, 也能極大的提高公司需求變更的響應速度.
接下來我就來分享一下如何實現輪播圖和文本的跨越式通信.
技術實現方案
之前和大家分享了兩期跨組件通信的技術方案, 我們繼續沿用之前的方案, 來實現輪播圖和文本的通信.
- 首先在輪播圖組件中創建并觸發自定義事件:
// 觸發函數
const handleTrigger = (value: string) => {
if(targetId) {
document.dispatchEvent(new CustomEvent(`source_text_${targetId}`, { detail: value }))
}
}
// 當輪播圖onchange時傳遞數據并觸發
<Carousel
className={cid}
notallow={index => {
// some code ...
// 一觸即發
handleTrigger(_data.length ? _data[index]?.title : imgList[index]?.title);
}}
directinotallow={direction}
swipeable={swipeable}
autoPlay={autoPlay}
loop
>
{contentRender()}
</Carousel>- 在文本組件中監聽事件并響應數據回傳
useEffect(() => {
const eventName = `source_text_${id}`;
function handleDataChange(event: any) {
setData(event.detail);
}
document.addEventListener(eventName, handleDataChange)
return () => document.removeEventListener(eventName, handleDataChange)
}, [])沒錯, 就這么點代碼, 就實現了輪播圖組件和文本組件的通信, 大家學會了嗎?
當然底層上還是依賴Dooring零代碼提供的便捷搭建能力和擴展能力, 讓組件間通信能煥發出更大的價值. 如果大家想體驗這一功能, 也歡迎線上使用, 同時也歡迎將這一方案用在自己公司的產品上, 更大的提高公司產研效率.
再展開想象, 這種方案不止于輪播圖, 比如我之前分享的搜索和列表組件, 對于業務層, 應用這一方案可以發揮更大的價值.
