618購物節(jié)來襲，電商陪你浪浪浪

selfimpr 發(fā)布于2019-08-29 15:42 / 1437人閱讀

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。

前言

購物節(jié)又要來啦！?。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍?！小伙伴們準(zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈！（滿心期待(*￣︶￣)）

（10秒后......）

好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]

咳咳，讓我們進(jìn)入正題。本人作為一個(gè)前端新手，終于完成了一個(gè)小項(xiàng)目——電商平臺的開發(fā)——以此文記錄一下我的開發(fā)歷程，希望在自己總結(jié)的同時(shí)也能幫助到其他小伙伴。（大家一起加油啦~）

詳細(xì)介紹 1、主頁

話不多說先上動(dòng)圖

???????????（！上錯(cuò)了上錯(cuò)了！圖在下面在下面?。?！看官們千萬別棄文！[一本正經(jīng)臉]）

主頁包括導(dǎo)航欄、輪播圖、圖標(biāo)導(dǎo)航（中間那部分不知道應(yīng)該怎么形容。。）以及底下用wx:for循環(huán)的商品列表。

導(dǎo)航欄

導(dǎo)航欄用的scroll-view組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。我在data中設(shè)置 curTag: 0 （默認(rèn)選中熱門類別），點(diǎn)擊各個(gè)類別會(huì)動(dòng)態(tài)改變curTag值；再通過wx:if="{{curTag == 0}}"的判斷來隱藏結(jié)構(gòu)。

代碼如下：

wxml

    
        
            {{item.name}}
        
        
    

wxss

    .block1 .blk1tab {
        display: inline-block;
        font-size: 22rpx;
        color: #58595b;
        margin: auto 14rpx;
        padding-top: 20rpx;
        border-bottom: 2rpx solid transparent;
    }
    .block1 .selected {
        color: red;
        border-color: red;
    }

js

    tabClick: function(e) {
        var id = e.currentTarget.dataset.id;
        this.setData({
            curNav: id,
            curTag: id
        });
    },

圖標(biāo)導(dǎo)航

圖標(biāo)來自于[iconfont-阿里巴巴矢量圖標(biāo)庫](http://www.iconfont.cn/)


圖標(biāo)導(dǎo)航用的也是scroll-view組件，具體講一下導(dǎo)航滑動(dòng)時(shí)，下方紅線進(jìn)度條跟進(jìn)的實(shí)現(xiàn)。

紅線移動(dòng)即是要?jiǎng)討B(tài)改變它在水平方向的位置，這是通過scroll-view組件中bindscroll事件實(shí)現(xiàn)的；事件觸發(fā)時(shí)可在detail中查詢到scrollLeft范圍，根據(jù)范圍再設(shè)置紅線相應(yīng)位置即可。

代碼如下：

wxml

    
        
            
                
                    
                    {{item.title}}
                
            
        
        
            
                
                    
                    {{item.title}}
                
            
        
    
    
        
    

js

    scrollMove: function(e) {
        var left = e.detail.scrollLeft;
        this.setData({
        viewleft: left
        })
    },

2、商品詳情頁

詳情頁有輪播圖、彈框和自定義的tabBar；輪播圖我就不提了，下面總結(jié)下彈框和tabBar的實(shí)現(xiàn)。

自定義tabBar

要將tabBar固定在頁面底部，只需在樣式中將position設(shè)為fixed，再設(shè)置好left和bottom即可。值得注意的是，此處使用navigator標(biāo)簽跳轉(zhuǎn)到tabBar首頁，默認(rèn)的跳轉(zhuǎn)方式?jīng)]法實(shí)現(xiàn)；需要將navigator的open-type設(shè)為switchTab。

wxml如下：

    
        
        首頁

自定義彈框

彈框這部分是兩個(gè)結(jié)構(gòu)，前面的信息面和后面透明的蒙層。彈框也是用fixed固定住，它的彈出效果可調(diào)用小程序api中的wx.createAnimation來實(shí)現(xiàn)。彈框彈出后，點(diǎn)擊蒙層可以退出彈框；而在這里我還做了一個(gè)小細(xì)節(jié)：彈出后詳情頁不可滾動(dòng)。


貼上代碼：


wxml

    
    
        服務(wù)說明
        
            
                
                    
                
                
                    {{item.title}}
                    {{item.content}}
                
            
        
    

js

    serverContent: function(e) {
        var that = this;
        // console.log(e);
        var animation  = wx.createAnimation({
            // 動(dòng)畫持續(xù)時(shí)間
            duration:200,
            // 動(dòng)畫效果
            timingFunction:"linear"
        });
        that.animation = animation
        //在y軸偏移
        animation.translateY(400).step()
        // 讓彈框出現(xiàn)
        that.setData({
            block3click: true,
            blockclick: true,
            animationData: animation.export()
        });
        setTimeout(function(){
            animation.translateY(0).step()
            that.setData({
                animationData: animation.export()
            })
        },100)
     },
    //隱藏彈框
    hideModal: function() {
        this.setData({
        block3click: false,
        blockclick: false
        })
    }

彈框出現(xiàn)禁止詳情頁滾動(dòng)，即blockclick為true時(shí)設(shè)置overflow為hidden。

3、選擇和支付頁面

選擇和支付頁面存在許多數(shù)據(jù)交互，比如不同貨號對應(yīng)不同商品圖；兩個(gè)頁面中的數(shù)據(jù)會(huì)相互影響，這里我還踩了幾個(gè)小坑（踩坑有益進(jìn)步┓(?′?`?)┏）讓我慢慢總結(jié)。。。

未選擇提示

這里沒有選擇貨號就會(huì)出現(xiàn)上圖的彈框，仍然是true or false的設(shè)置；沒啥好講噠，直接上代碼啦。

wxml

    確定
    請選擇貨號

js

    purchaseClick: function() {
        //獲取當(dāng)前選中的貨號
        var a = this.data.curNav;
        var that = this;
        //判斷是否選中 為空則顯示彈框
        if (a == null) {
            that.setData({
                showOut: true
            }) 
        } else {
            wx.navigateTo({
                url: "../pay/pay",
            })
        };
        var animation  = wx.createAnimation();
        //延時(shí)后隱藏彈框
        setTimeout(function(){
            that.setData({
                animationData: animation.export(),
                showOut: false
            })
        },1500)
    }

選擇頁和支付頁的數(shù)據(jù)交互

首先是選擇頁的數(shù)據(jù)更新，此處都是通過wx:for循環(huán)數(shù)組來添加信息。

頭部的數(shù)組中只有一條元素，包括了圖片、價(jià)格和貨號信息，當(dāng)選擇了不同的貨號后，就更替頭部數(shù)組中的元素；請見代碼：

頭部wxml:

    
        
            
        
        
            ￥{{item.price}}
            {{item.title}}
        
    
頭部js:

    //data中
    purContent: [
        {
            src: "http://t00img.yangkeduo.com/t05img/images/2018-06-04/e5162f6d8e3ee7bc5620ae4f7c9c4a42.jpeg",
            price: "9.9-27.9",
            title: "請選擇xa0xa0貨號"
        }
    ]
    
貨號部分wxml:

    
        貨號
        {{item.content}}
    
            
js

    //data中
    modalLists: [
        { 
            src: "http://t03img.yangkeduo.com/images/2018-04-17/9b022a30f3a9f10b437a1e19defb20fb.jpeg",
            content:"藍(lán)色經(jīng)典18包" ,
            price: "20.26",
            title: "已選：藍(lán)色經(jīng)典18包"
        },
        { 
            src: "http://t09img.yangkeduo.com/images/2018-04-17/1225b00e178d9042841170ca70e926b8.jpeg",
            content:"藍(lán)色經(jīng)典27包" ,
            price: "27.9",
            title: "已選：藍(lán)色經(jīng)典27包"
        },
        { 
            src: "http://t07img.yangkeduo.com/images/2018-04-17/bcbca6f465fa5e2c1a5628ec10d69089.jpeg",
            content:"藍(lán)色經(jīng)典8包" ,
            price: "10.9",
            title: "已選：藍(lán)色經(jīng)典8包"
        },
    ]
    
    ......
    
    selected: function(e) {
        //獲取當(dāng)前點(diǎn)中的貨號
        var index = e.currentTarget.dataset.index;
        //聲明一個(gè)空數(shù)組
        var list = new Array;
        //將當(dāng)前點(diǎn)中的貨號數(shù)組元素添加到list數(shù)組中
        list[0] = this.data.modalLists[index];
        //更替頭部purContent數(shù)組中元素
        this.setData({
            curNav: index,
            purContent: list,
        });
        //本地存儲(chǔ)，為支付頁傳數(shù)據(jù)
        wx.setStorage({
            key: "list",
            data: list[0]
        })
    }
選擇頁完成后，其數(shù)據(jù)要傳遞給支付頁，包括商品圖、數(shù)量、價(jià)格和貨號，同時(shí)支付頁要統(tǒng)計(jì)商品總價(jià)。數(shù)據(jù)的傳遞我是通過本地存儲(chǔ)完成的。將選擇頁的數(shù)據(jù)通過wx:setStorage進(jìn)行存儲(chǔ)，再在支付頁用wx:getStorage獲取數(shù)據(jù)，通過setData就可以將數(shù)據(jù)顯示出來了。

代碼：


wxml

    
        
            
        
        
            27包18包8包 植護(hù)原木抽紙300張整箱批發(fā)家庭裝3層抽去式面巾紙
            貨號：{{modal}}
            ￥{{price}}/件
        
    
    
    
        
            實(shí)付款：
            ￥{{total}}
            免運(yùn)費(fèi)
        
        
            立即支付
        
    

js

    data: {
        modal: "",
        price: "",
        number: "",
        src: "",
        total: ""
    },
    //計(jì)算總價(jià)
    total: function() {
        var that = this;
        var number = that.data.number,
        var price = that.data.price;
        //.toFixed()保留幾位小數(shù)
        var total = (number * price).toFixed(1);
        //顯示數(shù)據(jù)
        that.setData({
            total: total
        })
    }
    
    ......
    
    //獲取本地存儲(chǔ)中數(shù)據(jù)
    var that = this;
    wx.getStorage({
        key: "list",
        success: function(res){
            var modal = res.data.content;
            var price = res.data.price;
            var src = res.data.src;
            //更新數(shù)據(jù)
            that.setData({
                modal: modal,
                price: price,
                src: src
            });
        //第一次加載時(shí)計(jì)算一下總價(jià)
        that.total()
        }
    })

這里我加了一個(gè).toFixed()方法，因?yàn)闆]加時(shí)數(shù)量變化會(huì)讓小數(shù)精確度不一（好吧強(qiáng)迫癥犯了，我覺得加了就好看多了hhhhh）。

數(shù)量加減

商品數(shù)量變化是雙向的，在選擇頁的加減要更新到支付頁，而在支付頁改變數(shù)量后也要更新到選擇頁，這個(gè)效果的實(shí)現(xiàn)同樣通過本地存儲(chǔ)。

wxml

    
        
        -
        
        {{number}}
        
        +
    

js

        //減法 
        bindMinus: function() {
            // 字符串轉(zhuǎn)數(shù)字類
            var num = parseInt(this.data.number);
            var that = this;
            if (num > 1) {
                num = num - 1;
                that.setData({  
                    number: num
                })
            };
            //存儲(chǔ)一下
            wx.setStorage({
                key: "number",
                data: num
            })
        }
        
        //通過onShow獲取本地存儲(chǔ)，每次頁面顯示時(shí)都能更新數(shù)據(jù)
        onShow: function (options) {
            var that = this;
            wx.getStorage({
                key: "number",
                success: function(res){
                    var number = res.data;
                    that.setData({
                        number: number
                    })
                },
            })
        }
        
出于嚴(yán)謹(jǐn)性，調(diào)動(dòng)一下parseInt()方法，它可將字符串類型轉(zhuǎn)換成數(shù)字類型。

 
注意，選擇頁在每次加載前都應(yīng)清空本地存儲(chǔ)，不然可能存在加載完成后頁面上顯示的是上一次調(diào)試的數(shù)據(jù)；因此，可在onLoad中調(diào)用wx.clearStorage()。

    onLoad: function (options) {
        wx.clearStorage({
            key: "number",
            key: "list"
        })
    }

4、setInterval的使用

一直覺得拼多多的拼團(tuán)提示很好玩，所以最后忍不住去首頁弄一個(gè)類似的拼團(tuán)模塊，然后效果嘛。。。總感覺哪里怪怪的？?......

其實(shí)也是不停地設(shè)置true or false來控制模塊的顯示與否，通過setInterval()來定時(shí)，每隔一定時(shí)間就對相應(yīng)值取反，這樣就能看到模塊閃爍的效果了。

wxml

    
        
            
                
            
            Lesta邀請您一起剁手

    onLoad: function() {
        var that = this;
        var animation = wx.createAnimation();
        setInterval(function () {
            var show = !that.data.show;
            that.setData({
                animationData: animation.export(),
                show: show
            })
        }, 1500)
    }

什么？你說你想一起剁手嘛？？

零食拼不拼？？衣服拼不拼？水果拼不拼？

好吧你點(diǎn)進(jìn)去吧....

結(jié)束語

學(xué)習(xí)永不停歇。作為一個(gè)小白，我還有很長的路要去走，還有好多的坑要去跳，那么就在跌跌撞撞中提升吧~感謝各位?。╠a）伙（lao）伴將我這篇冗長文章看到最后，有哪里不足還請各位?。╠a）伙（lao）伴多多指教和提點(diǎn)。感謝！

附上我的項(xiàng)目地址：Lesta

GPU云服務(wù)器云服務(wù)器浪浪浪電商購物網(wǎng)用什么云服務(wù)器陪你傲游618

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113491.html

發(fā)表評論

登陸后可評論

0條評論

selfimpr

男|高級講師

我要關(guān)注我要私信

TA的文章

游戲開發(fā)商如何租用合適穩(wěn)定的游戲服務(wù)器？

閱讀 2765·2021-11-22 13:54
“云”上醫(yī)療｜云計(jì)算加速醫(yī)療數(shù)字化轉(zhuǎn)型升級_云資訊

閱讀 2701·2021-10-14 09:42
華納云(hncloud)，中國香港/美國云服務(wù)器，低至3折，384元/年起，OpenStack+CN

閱讀 4046·2021-09-28 09:47
django框架之sass項(xiàng)目中用到的工具 (1)

閱讀 2172·2021-09-03 10:28
青果網(wǎng)絡(luò)-618阿里云，騰訊云特惠優(yōu)惠折上折！

閱讀 1217·2021-07-26 23:38
CSS魔法堂：display:none與visibility:hidden的恩怨情仇

閱讀 2568·2019-08-30 15:54
JavaScript面向?qū)ο蟪醪秸J(rèn)識

閱讀 2647·2019-08-29 16:35
618購物節(jié)來襲，電商陪你浪浪浪

閱讀 1438·2019-08-29 15:42

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

618購物節(jié)來襲，電商陪你浪浪浪

相關(guān)文章