電商底部導(dǎo)航欄的制作

我想大家對(duì)電商一定不陌生，一般電商的底部導(dǎo)航欄有以下幾個(gè)首頁(yè)、分類、購(gòu)物車、個(gè)人中心。

app.json是用來配置page路徑以及導(dǎo)航欄屬性的，那我們要做首頁(yè)、分類、購(gòu)物車、個(gè)人中心界面就要在page也添加這幾個(gè)界面，所以在app.json的page里添加如下代碼，寫入page路徑，系統(tǒng)會(huì)自動(dòng)幫你創(chuàng)建界面的

"pages":[ "pages/home/home", "pages/classify/classify", "pages/cart/cart", "pages/mine/mine", "pages/index/index" ],

好，既然添加了四個(gè)界面，那我們要怎么做底部導(dǎo)航欄吶，今天給app.json再添加一個(gè)屬性，就是可以在app.json里配置導(dǎo)航欄，將下面代碼添加到app.json里面

"tabBar": { "color": "#858585", "selectedColor": "#f0145a", "backgroundColor": "#ffffff", "borderStyle": "#000", "list": [ { "pagePath": "pages/home/home", "iconPath": "images/bottomNav/home.png", "selectedIconPath": "images/bottomNav/home_select.png", "text": "首頁(yè)" }, { "pagePath": "pages/classify/classify", "iconPath": "images/bottomNav/classify.png", "selectedIconPath": "images/bottomNav/classify_select.png", "text": "分類" }, { "pagePath": "pages/cart/cart", "iconPath": "images/bottomNav/cart.png", "selectedIconPath": "images/bottomNav/cart_select.png", "text": "購(gòu)物車" }, { "pagePath": "pages/mine/mine", "iconPath": "images/bottomNav/mine.png", "selectedIconPath": "images/bottomNav/mine_select.png", "text": "我的" } ] }

tabBar系統(tǒng)自帶字段，不可改，添加這個(gè)字段就是告訴系統(tǒng)你要添加導(dǎo)航欄，color、selectedColor、backgroundColor從字面意思也字段，分別對(duì)應(yīng)的屬性是默認(rèn)字體顏色、勾選字體顏色、背景顏色。著重說一下borderStyle，這個(gè)的定義底部導(dǎo)航欄與界面的邊界線，屬性有點(diǎn)特殊，特殊在如果你不想要這個(gè)分界線，可以把屬性設(shè)置為white，剩下的不管你寫入的是什么，系統(tǒng)都理解為要添加這條分界線，不信你可以試試。list屬性自然是設(shè)置對(duì)應(yīng)導(dǎo)航欄的界面啦，

• pagePath：頁(yè)面路徑，就是你寫在page里的路徑
• iconPath：默認(rèn)導(dǎo)航欄圖片路徑
• selectedIconPath：勾選圖片的路徑
• text：導(dǎo)航欄名字

這里要說的是，圖片路徑，一定要寫對(duì)，不然找不到圖片就顯示不出來，這里給大家提供我的導(dǎo)航欄圖片---提取碼：8zwe?大家可以根據(jù)我的圖片路徑創(chuàng)建對(duì)應(yīng)的文件夾，如下圖

1-1.png

需要注意的：

• 添加tabBar的時(shí)候別忘記別忘記上面有一個(gè)逗號(hào)，這個(gè)是用來區(qū)分每個(gè)屬性的，所以你每添加一個(gè)屬性都要用逗號(hào)分隔開來，這點(diǎn)要注意，不然會(huì)報(bào)錯(cuò)，這就是我把標(biāo)點(diǎn)去掉的錯(cuò)誤日志，一般報(bào)出錯(cuò)誤日志Expecting 'EOF' XXXXXXXXX，got STRING都是語法錯(cuò)誤，所以要仔細(xì)檢查看看哪里少寫了東西。
  
  1-2.png
• 還有就是在.json文件里是不可以寫注釋的，我原本想添加一點(diǎn)注釋方便讀者閱讀，然而會(huì)出現(xiàn)下面錯(cuò)誤信息，解決辦法很簡(jiǎn)單，把注釋刪除就可以啦
  
  1-3.png

  舉一反三

• 我們創(chuàng)建了四個(gè)導(dǎo)航欄，那么如果我想再添加兩個(gè)導(dǎo)航欄可以嗎？
  你也許覺得很簡(jiǎn)單，試著去在list列表里添加兩個(gè)了吧，我也是這么做的，但是出問題啦。系統(tǒng)會(huì)報(bào)錯(cuò)，這回知道了吧，最多只能是五個(gè)，沒辦法，誰讓微信是老大，人家定最多五個(gè)那就只能最多五個(gè)嘍！
  
  1-3.png
• 不知道你有沒有注意到，導(dǎo)航欄默認(rèn)首頁(yè)勾選為紅色，那么我想要默認(rèn)勾選分類為紅色吶，要怎么辦？
  這個(gè)有點(diǎn)難度了吧，我剛開始想的是在tabBar屬性把list里的第一個(gè)home屬性和classify屬性換一下應(yīng)該就可以解決，然而并不是這樣的，因?yàn)闆]有效果，后來也是一次誤打誤撞給發(fā)現(xiàn)的，我給你點(diǎn)小提示，有沒有注意到，pages的第一個(gè)路徑是什么pages/home/home,沒錯(cuò)，就是它，如果想要分類classify作為默認(rèn)的勾選項(xiàng)，你只需要在pages屬性把home的路徑和classify路徑換一下，保存，重新編譯一下，你要的效果就出來了，這里可以總結(jié)的一點(diǎn)就是，tabBar是到page里的第一行路徑作為默認(rèn)勾選項(xiàng)的。

電商頂部導(dǎo)航欄制作

既然講了導(dǎo)航欄，干脆今天多講解一點(diǎn)，接著教教大家頂部導(dǎo)航欄怎么制作，先上效果圖

2-1.png

這個(gè)導(dǎo)航欄可不像底部導(dǎo)航欄啦，因?yàn)樗募?jí)別比較低，是頁(yè)面級(jí)別的導(dǎo)航欄，所以要寫在頁(yè)面里，你想要在哪個(gè)頁(yè)面加入頂部導(dǎo)航欄就在哪個(gè)頁(yè)面里添加如下代碼，這里以首頁(yè)的界面為例：
home.wxss

/* pages/home/home.wxss */ page{ display: flex; flex-direction: column; height: 100%; } .navbar{ flex: none; display: flex; background: #fff; } .navbar .item{ position: relative; flex: auto; text-align: center; line-height: 80rpx; font-size:14px; } /* 頂部導(dǎo)航字體顏色 */ .navbar .item.active{ color: #f0145a; } /* 頂部指示條屬性 */ .navbar .item.active:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 6rpx; background: #f0145a; }

home.wxml

<!--導(dǎo)航條--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> </view>

在home.wxml里面bindtap字段我們已經(jīng)講解過啦，是事件監(jiān)聽的標(biāo)識(shí)符，事件名稱叫“navbarTap”可以到home.js里查找到這個(gè)事件wx:for這個(gè)字段重點(diǎn)講解，在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item，這是官方解釋，說白了就是item默認(rèn)叫做變量的值，index表示第幾個(gè)變量的值，還不太明白請(qǐng)看這個(gè)?微信 wx:for 的講解

• wx:for="{{navbar}}"?意思是虛幻navbar的數(shù)組數(shù)據(jù)
• {{item}}?這里面是navbar數(shù)組里面的值，如護(hù)膚、彩妝等值
• wx:key="unique"?來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符
• data-idx="{{index}}"?存儲(chǔ)一些數(shù)據(jù)供home.js里調(diào)用，這里data-xxx，xxx就是你給home.js里提供的數(shù)據(jù)關(guān)鍵詞，home.js通過獲取xxx關(guān)鍵詞來獲取xxx里面的數(shù)據(jù)

home.js

// pages/home/home.js var app = getApp() Page({ data: { navbar: ['護(hù)膚', '彩妝', '香水','個(gè)人護(hù)理'], currentTab: 0, }, // 導(dǎo)航切換監(jiān)聽 navbarTap: function (e) { console.debug(e); this.setData({ currentTab: e.currentTarget.dataset.idx }) }, })

home.js，這里讀過微信小程序入門篇（二）都知道，page頁(yè)面里.js一般是放data數(shù)據(jù)和事件監(jiān)聽的，這里data有一個(gè)navbar導(dǎo)航欄數(shù)據(jù)，還有一個(gè)記錄當(dāng)前位置的currentTab,字段可以自由命名，賦值的時(shí)候?qū)?yīng)上就好，

• navbarTap?記得在home.wxml里面data-idx屬性嗎，在這里用到，currentTab: e.currentTarget.dataset.idx?把當(dāng)前用戶選擇的Tab傳給currentTab里，為了驗(yàn)證一下結(jié)果，我在這里面加入了一個(gè)輸出日志console.debug(e);，可以在控制臺(tái)上看輸出的日志，我選擇點(diǎn)擊彩妝，輸出臺(tái)的數(shù)據(jù)idx：1剛好是彩妝的位置。

2-2.png

總結(jié)

今天我們講解的微信小程序的底部導(dǎo)航欄和頂部導(dǎo)航欄，導(dǎo)航欄應(yīng)該說是必須的對(duì)于電商小程序來說，那么今天的導(dǎo)航欄教程你掌握了嗎？

學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入學(xué)習(xí)交流群
343599877，我們一起學(xué)前端！

總結(jié)

以上是生活随笔為你收集整理的前端微信小程序实战篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。