iOS 實(shí)現(xiàn)類(lèi)似京東商品詳情頁(yè)

各位針對(duì)分頁(yè)結(jié)構(gòu),上傳了一個(gè)demo,但是屬性選擇太復(fù)雜了,沒(méi)法上傳抱歉 (其實(shí)這是第一次剝離出來(lái), 我覺(jué)得, 耦合太嚴(yán)重了, 比如各種工具類(lèi), 常見(jiàn)分類(lèi), 可以搞一個(gè)自己的倉(cāng)庫(kù), 這樣, 新建一個(gè)項(xiàng)目或者剝離一個(gè)項(xiàng)目 直接就pod一下, 這樣處理了, 不用到處復(fù)制工具類(lèi)..)
(實(shí)際上很多代碼沒(méi)刪除干凈..但是剝了幾個(gè)小時(shí) 終于跟剝開(kāi)了, 想的是本來(lái)屬性選擇也搞的
無(wú)奈子商品太多,我們重新請(qǐng)求的, 所以 沒(méi)辦法, 這里的就是個(gè)架子, 有問(wèn)題在交流)
https://github.com/fss1994/ProductDetailPage

1.首先實(shí)現(xiàn)最大的功能,就是商品詳情的架子,目前主流的商品詳情頁(yè)都是采取左右滑動(dòng),三層(商品,詳情,評(píng)價(jià)),也就是想要有一個(gè)大容器裝著這三個(gè),并且左右滑動(dòng),并且還要良好的監(jiān)聽(tīng)各事件,這里我是在"TYPagerController"的基礎(chǔ)上重新自定義了一個(gè)基于nav左右滑動(dòng)的容器.實(shí)現(xiàn)效果如下(需要增加只需在對(duì)應(yīng)協(xié)議增加控制器即可)


框架滑動(dòng).gif

2.我們實(shí)現(xiàn)的只是冰山一角,在搭建了框子之后,我們需要做的還有很多,例如這個(gè)上下滾動(dòng)的效果以及屬性選擇

上下滾動(dòng)及屬性選擇.gif

還有右上角的彈出框


彈出框.gif

3.關(guān)于這個(gè)上下滾動(dòng)你們一定能找到許多demo,這里就不多贅述,彈出框用的是"FTPopOverMenu"這個(gè)框架可以試試,使用非常簡(jiǎn)便,
4.相信最復(fù)雜的還是屬性選擇界面吧,這里的屬性選擇界面我參考了http://www.itdecent.cn/p/615bd6158e8f 這位作者的文章,但是與我們的產(chǎn)品并不能兼容,于是采用了自己寫(xiě)的,用的是collectionView的實(shí)現(xiàn)方式.其實(shí)最難得都不是這些.最復(fù)雜的是與接口定義sku的實(shí)現(xiàn)方式,因?yàn)槲覀儺a(chǎn)品不是很給力,所以這些都需要我們和接口后臺(tái)定,而且要實(shí)現(xiàn)類(lèi)似京東的選中一個(gè)屬性,要知道另一個(gè)屬性是否有規(guī)格,是否有貨等情況,這就要求json數(shù)據(jù)里包含了所有的組合情況,以及點(diǎn)擊一個(gè)cell時(shí)要遍歷所有的組合情況,以下是一行屬性的所有json

        {
            title = 規(guī)格;
            value = (
            {
            bottons = (
            {
            id = f8dc5bc18fac4408b681874627799183;
            isStock = 1;
        },
            {
            id = fcce3af2137e425b81866a3cb31f1914;
            isStock = 1;
        },
        );
            name = 128GB;
        },
            {
            bottons = (
            {
            id = e503aa954e434f3e99f469042a8cae2c;
            isStock = 1;
        },
            {
            id = 578c2c50166547ebbcb2d3f947fd444d;
            isStock = 0;
        },
            {
            id = 8f8997a819e24b49bac34e7329f6fd16;
            isStock = 1;
        },
        );
            name = 32GB;
        },
            {
            bottons = (
            {
            id = adba890a6c6b4f28aabb1eeaeadf8472;
            isStock = 0;
        },
        );
            name = 16G;
        } ,
        );
            type = standard;
        }

看著惡心不,我寫(xiě)下判斷點(diǎn)擊邏輯,會(huì)更惡心

  1. 剛進(jìn)入時(shí),選擇默認(rèn)產(chǎn)品 剛進(jìn)入時(shí),有默認(rèn)產(chǎn)品,默認(rèn)N個(gè)選中狀態(tài).(N為傳過(guò)來(lái)的屬性種類(lèi)個(gè)數(shù)), 假設(shè)為了判斷第一行的狀態(tài),需要使用除第一行的其他所有行選中狀態(tài)下的屬性集合中包含的pid集合的交集,來(lái)對(duì)第一行的其他未選中屬性進(jìn)行判斷. 同理其他行亦然.
  2. 點(diǎn)擊其他屬性,這里分三種情況.
    1.點(diǎn)擊可選中(無(wú)規(guī)格)屬性 2.點(diǎn)擊可選中(有規(guī)格)屬性 3.點(diǎn)擊不可選(無(wú)貨);
  • 情況一. 點(diǎn)擊可選中(無(wú)規(guī)格)商品屬性時(shí),將所有選中的商品置為未選中,將該無(wú)規(guī)格屬性商品的pid集合作為篩選條件,對(duì)所有行進(jìn)行遍歷確認(rèn)其他行邏輯,另該無(wú)規(guī)格自身行的所有屬性置為可選
  • 情況二. 點(diǎn)擊可選中(有規(guī)格)商品屬性時(shí),將該屬性選中,這里又分2種情況
    ① 選中了所有傳過(guò)來(lái)種類(lèi)個(gè)數(shù)的屬性,該情況時(shí)與第一種選中默認(rèn)產(chǎn)品相似,假設(shè)為了判斷第一行的狀態(tài),需要使用除第一行的其他所有行選中狀態(tài)下的屬性集合中包含的pid集合的交集,來(lái)對(duì)第一行的其他未選中屬性進(jìn)行判斷. 同理其他行亦然.
    ②選中了大于一個(gè),但是小于所有傳過(guò)來(lái)種類(lèi)個(gè)數(shù)的屬性,該情況需要對(duì)選中行所有進(jìn)行排列,也需要要對(duì)未選中行進(jìn)行排列.對(duì)選中行的排列是依據(jù)其他選中行的pid集合的交集(此處與默認(rèn)排列相似),而對(duì)未選中行的排列則是依據(jù)所有選中行的pid的集合的交集來(lái)進(jìn)行操作
  • 情況三. 點(diǎn)擊不可選(無(wú)貨) 點(diǎn)擊事件return;

后期其實(shí)加了更多需求,先放著,有時(shí)間優(yōu)化..總體實(shí)現(xiàn)效果我發(fā)一下


總體實(shí)現(xiàn)效果.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評(píng)論 19 139
  • 翻譯自“Collection View Programming Guide for iOS” 0 關(guān)于iOS集合視...
    lakerszhy閱讀 4,071評(píng)論 1 22
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評(píng)論 25 709
  • 01“梅”是我的主人 我叫“年年”,年年有余的“年年”。我是只男貓,今年一歲。 我的名字是梅給我取的,梅是我的主人...
    蘇洛洛66閱讀 376評(píng)論 0 6
  • 一晃眼,我每天打開(kāi)app學(xué)習(xí)心理學(xué)課20天了,原本以為28天實(shí)在是太久了,我擔(dān)心我堅(jiān)持不來(lái),但還是堅(jiān)持了下...
    loyanda閱讀 265評(píng)論 0 2

友情鏈接更多精彩內(nèi)容