摘要:導航欄導航欄用的組件,設置其水平方向滑動,點擊到的字體會變換樣式。而且,導航欄點擊不同的類別會將主頁替換成不同的結構,這就要將最開始的主頁結構隱藏起來。
前言
購物節又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?!衣服打折了!!小伙伴們準備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈!(滿心期待(* ̄︶ ̄))
(10秒后......)
好吧我還是寫個電商小程序過過癮好了。[冷漠臉]
咳咳,讓我們進入正題。本人作為一個前端新手,終于完成了一個小項目——電商平臺的開發——以此文記錄一下我的開發歷程,希望在自己總結的同時也能幫助到其他小伙伴。(大家一起加油啦~)
話不多說先上動圖
???????????(!上錯了上錯了!圖在下面在下面?。。】垂賯兦f別棄文![一本正經臉])
主頁包括導航欄、輪播圖、圖標導航(中間那部分不知道應該怎么形容。。)以及底下用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
2、商品詳情頁{{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來實現。彈框彈出后,點擊蒙層可以退出彈框;而在這里我還做了一個小細節:彈出后詳情頁不可滾動。
貼上代碼:
wxmljs 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。 服務說明 {{item.title}} {{item.content}}
選擇和支付頁面存在許多數據交互,比如不同貨號對應不同商品圖;兩個頁面中的數據會相互影響,這里我還踩了幾個小坑(踩坑有益進步┓(?′?`?)┏)讓我慢慢總結。。。
未選擇提示
這里沒有選擇貨號就會出現上圖的彈框,仍然是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:頭部js: //data中 purContent: [ { src: "http://t00img.yangkeduo.com/t05img/images/2018-06-04/e5162f6d8e3ee7bc5620ae4f7c9c4a42.jpeg", price: "9.9-27.9", title: "請選擇xa0xa0貨號" } ] 貨號部分wxml: ¥{{item.price}} {{item.title}} 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就可以將數據顯示出來了。 貨號 {{item.content}}
代碼:
wxml27包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
4、setInterval的使用- {{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) }
什么?你說你想一起剁手嘛??
零食拼不拼??衣服拼不拼?水果拼不拼?
好吧你點進去吧....
學習永不停歇。作為一個小白,我還有很長的路要去走,還有好多的坑要去跳,那么就在跌跌撞撞中提升吧~感謝各位?。╠a)伙(lao)伴將我這篇冗長文章看到最后,有哪里不足還請各位小(da)伙(lao)伴多多指教和提點。感謝!
附上我的項目地址:Lesta
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52523.html
摘要:導航欄導航欄用的組件,設置其水平方向滑動,點擊到的字體會變換樣式。而且,導航欄點擊不同的類別會將主頁替換成不同的結構,這就要將最開始的主頁結構隱藏起來。 前言 購物節又要來啦!?。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?!衣服打折了!!小伙伴們準備好買買買了嗎?。?!讓我看看我還多少余額哈?。M心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進入正題...
摘要:導航欄導航欄用的組件,設置其水平方向滑動,點擊到的字體會變換樣式。而且,導航欄點擊不同的類別會將主頁替換成不同的結構,這就要將最開始的主頁結構隱藏起來。 前言 購物節又要來啦!!(撒花撒花?。┝闶炒蛘劾玻。∫路蛘哿耍?!小伙伴們準備好買買買了嗎!!!讓我看看我還多少余額哈?。M心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進入正題...
showImg(https://segmentfault.com/img/bVbtLkg?w=900&h=383);一年一度618,歲歲年年狂剁手。隨著網購時代的到來,越來越多的剁手節讓大家謎一樣的沉浸其中,無法自拔,什么618、雙十一、雙十二、雙旦等等年前定下的攢錢目標還沒開始就要宣告結束這就是人生不得不承認的事實 showImg(https://segmentfault.com/img/bVb...
showImg(https://segmentfault.com/img/bVbtsql?w=831&h=354); 一年一度618,歲歲年年狂剁手。隨著網購時代的到來,越來越多的剁手節讓大家謎一樣的沉浸其中,無法自拔,什么618、雙十一、雙十二、雙旦等等年前定下的攢錢目標還沒開始就要宣告結束這就是人生不得不承認的事實 showImg(https://segmentfault.com/img/bV...
閱讀 768·2021-09-26 09:55
閱讀 2058·2021-09-22 15:44
閱讀 1473·2019-08-30 15:54
閱讀 1324·2019-08-30 15:54
閱讀 2668·2019-08-29 16:57
閱讀 517·2019-08-29 16:26
閱讀 2490·2019-08-29 15:38
閱讀 2122·2019-08-26 11:48