摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。

購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）


（10秒后......）

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


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

話不多說先上動圖




???????????（！上錯了上錯了！圖在下面在下面！！！看官們千萬別棄文！[一本正經臉]）

主頁包括導航欄、輪播圖、圖標導航（中間那部分不知道應該怎么形容。。）以及底下用wx:for循環的商品列表。

導航欄

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


代碼如下：

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
        });
    },

圖標導航

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


圖標導航用的也是scroll-view組件，具體講一下導航滑動時，下方紅線進度條跟進的實現。

紅線移動即是要動態改變它在水平方向的位置，這是通過scroll-view組件中bindscroll事件實現的；事件觸發時可在detail中查詢到scrollLeft范圍，根據范圍再設置紅線相應位置即可。

代碼如下：


wxml

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

js

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

詳情頁有輪播圖、彈框和自定義的tabBar；輪播圖我就不提了，下面總結下彈框和tabBar的實現。

自定義tabBar

要將tabBar固定在頁面底部，只需在樣式中將position設為fixed，再設置好left和bottom即可。值得注意的是，此處使用navigator標簽跳轉到tabBar首頁，默認的跳轉方式沒法實現；需要將navigator的open-type設為switchTab。


wxml如下：

    
        
        首頁
    

自定義彈框

彈框這部分是兩個結構，前面的信息面和后面透明的蒙層。彈框也是用fixed固定住，它的彈出效果可調用小程序api中的wx.createAnimation來實現。彈框彈出后，點擊蒙層可以退出彈框；而在這里我還做了一個小細節：彈出后詳情頁不可滾動。


貼上代碼：


wxml

    
    
        服務說明
        
            
                
                    
                
                
                    {{item.title}}
                    {{item.content}}
                
            
        
    

js

    serverContent: function(e) {
        var that = this;
        // console.log(e);
        var animation  = wx.createAnimation({
            // 動畫持續時間
            duration:200,
            // 動畫效果
            timingFunction:"linear"
        });
        that.animation = animation
        //在y軸偏移
        animation.translateY(400).step()
        // 讓彈框出現
        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
        })
    }

彈框出現禁止詳情頁滾動，即blockclick為true時設置overflow為hidden。

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

未選擇提示

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


wxml

    確定
    請選擇貨號

js

    purchaseClick: function() {
        //獲取當前選中的貨號
        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();
        //延時后隱藏彈框
        setTimeout(function(){
            that.setData({
                animationData: animation.export(),
                showOut: false
            })
        },1500)
    }

選擇頁和支付頁的數據交互

首先是選擇頁的數據更新，此處都是通過wx:for循環數組來添加信息。

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

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

代碼：


wxml

    
        
            
        
        
            27包18包8包 植護原木抽紙300張整箱批發家庭裝3層抽去式面巾紙
            貨號：{{modal}}
            ￥{{price}}/件
        
    
    
    
        
            實付款：
            ￥{{total}}
            免運費
        
        
            立即支付
        
    

js

    data: {
        modal: "",
        price: "",
        number: "",
        src: "",
        total: ""
    },
    //計算總價
    total: function() {
        var that = this;
        var number = that.data.number,
        var price = that.data.price;
        //.toFixed()保留幾位小數
        var total = (number * price).toFixed(1);
        //顯示數據
        that.setData({
            total: total
        })
    }
    
    ......
    
    //獲取本地存儲中數據
    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;
            //更新數據
            that.setData({
                modal: modal,
                price: price,
                src: src
            });
        //第一次加載時計算一下總價
        that.total()
        }
    })

這里我加了一個.toFixed()方法，因為沒加時數量變化會讓小數精確度不一（好吧強迫癥犯了，我覺得加了就好看多了hhhhh）。

數量加減

商品數量變化是雙向的，在選擇頁的加減要更新到支付頁，而在支付頁改變數量后也要更新到選擇頁，這個效果的實現同樣通過本地存儲。


wxml

    
        
        -
        
        {{number}}
        
        +
    

js

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

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

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

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

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


wxml

    
        
            
                
            
            Lesta邀請您一起剁手
        
    

js

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

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


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


好吧你點進去吧....

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



附上我的項目地址：Lesta