3 创建底部导航条
我们底部导航条作为一级页面，可以使用微信自带的tabBar组件，配置方法是直接在app.json文件里增加对应的属性。导航条可以使用图标+文字的方案，图标有两种一种是选中状态，一种是未选中状态。
"tabBar": { "custom": true, "color": "#666666", "selectedColor": "#FF5F15", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/home/home", "text": "首页" }, { "pagePath": "pages/goods/category/index", "text": "分类" }, { "pagePath": "pages/cart/index", "text": "购物车" }, { "pagePath": "pages/usercenter/index", "text": "我的" } ] }
把这个配置添加到app.json发现底部菜单栏并没有出现，原因是现在我们设置了cutom为true，表示我们要自己定义菜单栏的表现形式，因此需要在根目录创建一个custom-tab-bar文件夹
在文件夹下建立如下文件
在index.json里输入如下配置
{ "component": true, "usingComponents": { "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar", "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item", "t-icon": "tdesign-miniprogram/icon/icon" } }
component为true表示这是一个自定义组件，下边引入了三个框架自带组件
在data.js里输入如下代码
export default [ { icon: 'home', text: '首页', url: 'pages/home/home', }, { icon: 'sort', text: '分类', url: 'pages/goods/category/index', }, { icon: 'cart', text: '购物车', url: 'pages/cart/index', }, { icon: 'person', text: '个人中心', url: 'pages/usercenter/index', }, ];
这里导出了一个数组，数组里的元素是菜单的具体配置，包括图标、文字名称和路径，但这里icon并没有指名路径，是使用框架自带的图标
剩下的配置我们就不解读了，官方已经编写好了，我们只需要复用他的代码就可以
index.js
import TabMenu from './data'; Component({ data: { active: 0, list: TabMenu, }, methods: { onChange(event) { this.setData({ active: event.detail.value }); wx.switchTab({ url: this.data.list[event.detail.value].url.startsWith('/') ? this.data.list[event.detail.value].url : `/${this.data.list[event.detail.value].url}`, }); }, init() { const page = getCurrentPages().pop(); const route = page ? page.route.split('?')[0] : ''; const active = this.data.list.findIndex( (item) => (item.url.startsWith('/') ? item.url.substr(1) : item.url) === `${route}`, ); this.setData({ active }); }, }, });
index.wxml
<t-tab-bar value="{{active}}" bindchange="onChange" split="{{false}}" > <t-tab-bar-item wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index" > <view class="custom-tab-bar-wrapper"> <t-icon prefix="wr" name="{{item.icon}}" size="48rpx" /> <view class="text">{{ item.text }}</view> </view> </t-tab-bar-item> </t-tab-bar>
index.wxss
.custom-tab-bar-wrapper { display: flex; flex-direction: column; align-items: center; } .custom-tab-bar-wrapper .text { font-size: 20rpx; }
实际我们自己做的时候就是把这些代码依次的复制到对应的文件里，复制过去发现图标显示不了，需要再引入一个样式文件，在根目录建一个style文件夹，创建一个iconfont的wxss文件
样式文件的内容
@font-face { font-family: 'wr'; src: url('https://cdn3.codesign.qq.com/icons/gqxWyZ1yMJZmVXk/Yyg5Zp2LG8292lK/iconfont.woff?t=cfc62dd36011e60805f5c3ad1a20b642') format('woff2'); } .wr { font-family: 'wr' !important; font-size: 32rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wr-deliver:before { content: '\e033'; } .wr-indent_close:before { content: '\e041'; } .wr-edit:before { content: '\e002'; } .wr-succeed:before { content: '\e00d'; } .wr-goods_return:before { content: '\e03c'; } .wr-wallet:before { content: '\e051'; } .wr-package:before { content: '\e047'; } .wr-comment:before { content: '\e037'; } .wr-exchang:before { content: '\e03e'; } .wr-credit_card:before { content: '\e035'; } .wr-service:before { content: '\e04a'; } .wr-shop_bag:before { content: '\e02a'; } .wr-goods_refund:before { content: '\e03d'; } .wr-check:before { content: '\e053'; } .wr-wechat:before { content: '\e065'; } .wr-cartAdd:before { content: '\e05d'; } .wr-home:before { content: '\e020'; } .wr-person:before { content: '\e02c'; } .wr-cart:before { content: '\e023'; } .wr-location:before { content: '\e016'; } .wr-arrow_forward:before { content: '\e012'; } .wr-close:before { content: '\e021'; } .wr-search:before { content: '\e011'; } .wr-clear_filled:before { content: '\e027'; } .wr-arrow_drop_up:before { content: '\e071'; } .wr-arrow_drop_down:before { content: '\e070'; } .wr-filter:before { content: '\e038'; } .wr-copy:before { content: '\e001'; } .wr-arrow_back:before { content: '\e003'; } .wr-add_circle:before { content: '\e004'; } .wr-Download:before { content: '\e006'; } .wr-map:before { content: '\e007'; } .wr-store:before { content: '\e008'; } .wr-movie:before { content: '\e00a'; } .wr-done:before { content: '\e00b'; } .wr-minus:before { content: '\e00c'; } .wr-list:before { content: '\e00e'; } .wr-expand_less:before { content: '\e00f'; } .wr-person_add:before { content: '\e010'; } .wr-Photo:before { content: '\e013'; } .wr-preview:before { content: '\e014'; } .wr-remind:before { content: '\e015'; } .wr-info:before { content: '\e017'; } .wr-expand_less_s:before { content: '\e018'; } .wr-arrow_forward_s:before { content: '\e019'; } .wr-expand_more_s:before { content: '\e01a'; } .wr-share:before { content: '\e01d'; } .wr-notify:before { content: '\e01e'; } .wr-add:before { content: '\e01f'; } .wr-Home:before { content: '\e020'; } .wr-delete:before { content: '\e022'; } .wr-error:before { content: '\e025'; } .wr-sort:before { content: '\e028'; } .wr-sort_filled:before { content: '\e029'; } .wr-shop_bag_filled:before { content: '\e02b'; } .wr-person_filled:before { content: '\e02d'; } .wr-cart_filled:before { content: '\e02e'; } .wr-home_filled:before { content: '\e02f'; } .wr-add_outline:before { content: '\e030'; } .wr-compass:before { content: '\e034'; } .wr-goods_exchange:before { content: '\e03a'; } .wr-group_buy:before { content: '\e03b'; } .wr-group:before { content: '\e03f'; } .wr-indent_goods:before { content: '\e040'; } .wr-help:before { content: '\e042'; } .wr-group_takeout:before { content: '\e043'; } .wr-label:before { content: '\e044'; } .wr-indent_wating:before { content: '\e045'; } .wr-member:before { content: '\e046'; } .wr-scanning:before { content: '\e04b'; } .wr-tv:before { content: '\e04d'; } .wr-to_top:before { content: '\e04f'; } .wr-visibility_off:before { content: '\e050'; } .wr-error-1:before { content: '\e052'; } .wr-arrow_right:before { content: '\e054'; } .wr-arrow_left:before { content: '\e056'; } .wr-picture_filled:before { content: '\e057'; } .wr-navigation:before { content: '\e058'; } .wr-telephone:before { content: '\e059'; } .wr-indent_time:before { content: '\e05c'; } .wr-cart_add:before { content: '\e05d'; } .wr-classify:before { content: '\e060'; } .wr-place:before { content: '\e063'; } .wr-wechat_pay:before { content: '\e064'; } .wr-security:before { content: '\e066'; } .wr-alarm:before { content: '\e067'; } .wr-person-1:before { content: '\e068'; } .wr-open_in_new:before { content: '\e069'; } .wr-uncheck:before { content: '\e06b'; } .wr-thumb_up:before { content: '\e06c'; } .wr-thumb_up_filled:before { content: '\e06d'; } .wr-star:before { content: '\e06e'; } .wr-star_filled:before { content: '\e06f'; } .wr-cards:before { content: '\e072'; } .wr-picture_error_filled:before { content: '\e076'; } .wr-discount:before { content: '\e077'; }
然后需要在app.wxss里引入
@import 'style/iconfont.wxss';
一切配置好之后我们就把底部导航栏制作好了
总结
我们本篇带着大家搭建了一下TDesign电商模板的底部导航条功能，模板是使用自定义组件进行了搭建，还引入了自定义样式文件，稍稍有一点复杂，可以照着教程自己实验一下。
