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