7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領(lǐng)先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
圖片
上圖畫布中有兩個組件: 輪播圖 和 文本組件. 我們可以在圖中看到當輪播圖組件內(nèi)容切換時, 文本組件內(nèi)容也會對應(yīng)的切換. 熟悉前端開發(fā)的小伙伴也許會覺得這樣的功能很好實現(xiàn), 我們可以用諸如 react, vue 這樣的框架來輕松實現(xiàn)數(shù)據(jù)狀態(tài)的共享, 但是通過傳統(tǒng)的組件開發(fā)方式來實現(xiàn)這樣的功能, 存在太多的局限性, 比如:
我們一般的輪播圖組件長這樣:
圖片
一般輪播圖文案會放在圖片中間或者底部, 如果產(chǎn)品經(jīng)理或者設(shè)計師小朋友想調(diào)整文本的位置, 比如以下幾種:
左圖右文(或右圖左文)排版:
圖片
輪播文本出現(xiàn)在左上方:
圖片
上圖下文的輪播圖排版:
圖片
面對這些花里胡哨的排版設(shè)計, 傳統(tǒng)做法只能通過程序員不斷修改或者擴展代碼,才能實現(xiàn)這些的需求.
這里的“成本”并不是組件的修改成本高, 因為改變位置對程序員來說都是小意思, 這里的成本指的是時間成本. 因為網(wǎng)站上線會涉及一系列的準備工作, 比如代碼修改, 代碼提交, 代碼測試, 最終再把網(wǎng)站上線.
圖片
同時花大部分時間做一些低價值的任務(wù), 對程序員自身成長也不友好, 所以我們需要思考更優(yōu)雅的方式.
比如我們要實現(xiàn)帶背景的輪播圖文案, 如果按照老路子開發(fā), 程序員又得嘩嘩寫代碼了.
輪播圖這類對外展示信息的需求, 雖然大多不是企業(yè)的核心需求, 但是某些時候卻對企業(yè)的形象和企業(yè)價值傳遞至關(guān)重要, 所以我們必須要及時響應(yīng)需求的變化, 第一時間維護公司的形象.
怎么去做呢? 我的答案是: 讓產(chǎn)品經(jīng)理和設(shè)計師們自己去維護輪播圖組件.
圖片
圖片
圖片
輪播文案動畫效果:
圖片
輪播和文案分離的課件式交互:
圖片
當然還有很多玩法等待大家開啟, 如果我們把這個功能嫁接給產(chǎn)品或者業(yè)務(wù)人員, 那么將極大的解放程序員的雙手, 也能極大的提高公司需求變更的響應(yīng)速度.
接下來我就來分享一下如何實現(xiàn)輪播圖和文本的跨越式通信.
之前和大家分享了兩期跨組件通信的技術(shù)方案, 我們繼續(xù)沿用之前的方案, 來實現(xiàn)輪播圖和文本的通信.
// 觸發(fā)函數(shù)const handleTrigger = (value: string) => { if(targetId) { document.dispatchEvent(new CustomEvent(`source_text_${targetId}`, { detail: value })) } } // 當輪播圖onchange時傳遞數(shù)據(jù)并觸發(fā)<Carousel className={cid} notallow={index => { // some code ... // 一觸即發(fā) 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) }, [])沒錯, 就這么點代碼, 就實現(xiàn)了輪播圖組件和文本組件的通信, 大家學會了嗎?
當然底層上還是依賴Dooring零代碼提供的便捷搭建能力和擴展能力, 讓組件間通信能煥發(fā)出更大的價值. 如果大家想體驗這一功能, 也歡迎線上使用, 同時也歡迎將這一方案用在自己公司的產(chǎn)品上, 更大的提高公司產(chǎn)研效率.
再展開想象, 這種方案不止于輪播圖, 比如我之前分享的搜索和列表組件, 對于業(yè)務(wù)層, 應(yīng)用這一方案可以發(fā)揮更大的價值.
本文鏈接：http://www.www897cc.com/showinfo-26-57289-0.html掌握這個技術(shù)，給輪播圖和文本插上自由之翼
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Pandas入門的12個技巧
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號