Redmi Pad評測：紅米充滿野心的一次嘗試
從Note系列到K系列，從藍牙耳機到筆記本電腦，紅米不知不覺之間也已經形成了自己頗有競爭力的產品體系，在中端和次旗艦市場上甚至要比小米新機的表現來得更好，正所謂“大丈夫生居
圖片
上圖畫布中有兩個組件: 輪播圖 和 文本組件. 我們可以在圖中看到當輪播圖組件內容切換時, 文本組件內容也會對應的切換. 熟悉前端開發的小伙伴也許會覺得這樣的功能很好實現, 我們可以用諸如 react, vue 這樣的框架來輕松實現數據狀態的共享, 但是通過傳統的組件開發方式來實現這樣的功能, 存在太多的局限性, 比如:
我們一般的輪播圖組件長這樣:
圖片
一般輪播圖文案會放在圖片中間或者底部, 如果產品經理或者設計師小朋友想調整文本的位置, 比如以下幾種:
左圖右文(或右圖左文)排版:
圖片
輪播文本出現在左上方:
圖片
上圖下文的輪播圖排版:
圖片
面對這些花里胡哨的排版設計, 傳統做法只能通過程序員不斷修改或者擴展代碼,才能實現這些的需求.
這里的“成本”并不是組件的修改成本高, 因為改變位置對程序員來說都是小意思, 這里的成本指的是時間成本. 因為網站上線會涉及一系列的準備工作, 比如代碼修改, 代碼提交, 代碼測試, 最終再把網站上線.
圖片
同時花大部分時間做一些低價值的任務, 對程序員自身成長也不友好, 所以我們需要思考更優雅的方式.
比如我們要實現帶背景的輪播圖文案, 如果按照老路子開發, 程序員又得嘩嘩寫代碼了.
輪播圖這類對外展示信息的需求, 雖然大多不是企業的核心需求, 但是某些時候卻對企業的形象和企業價值傳遞至關重要, 所以我們必須要及時響應需求的變化, 第一時間維護公司的形象.
怎么去做呢? 我的答案是: 讓產品經理和設計師們自己去維護輪播圖組件.
圖片
圖片
圖片
輪播文案動畫效果:
圖片
輪播和文案分離的課件式交互:
圖片
當然還有很多玩法等待大家開啟, 如果我們把這個功能嫁接給產品或者業務人員, 那么將極大的解放程序員的雙手, 也能極大的提高公司需求變更的響應速度.
接下來我就來分享一下如何實現輪播圖和文本的跨越式通信.
之前和大家分享了兩期跨組件通信的技術方案, 我們繼續沿用之前的方案, 來實現輪播圖和文本的通信.
// 觸發函數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零代碼提供的便捷搭建能力和擴展能力, 讓組件間通信能煥發出更大的價值. 如果大家想體驗這一功能, 也歡迎線上使用, 同時也歡迎將這一方案用在自己公司的產品上, 更大的提高公司產研效率.
再展開想象, 這種方案不止于輪播圖, 比如我之前分享的搜索和列表組件, 對于業務層, 應用這一方案可以發揮更大的價值.
本文鏈接：http://www.tebozhan.com/showinfo-26-57289-0.html掌握這個技術，給輪播圖和文本插上自由之翼
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Pandas入門的12個技巧
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號