1.新建template文件夹用于保存tabBar模板,template/template.wxml
<template name="tabBar">
<view class="tabBar">
<block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
<view class="tabBar-item">
<navigator open-type="reLaunch" url="{{item.pagePath}}">
<view><image class="icon" src='{{item.iconPath}}'></image></view>
<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
</navigator>
</view>
</block>
</view>
</template>
2.创建template.wxss
.icon{
width:54rpx;
height: 54rpx;
}
.tabBar{
width:100%;
position: fixed;
bottom:0;
padding:10rpx;
margin-left:-4rpx;
background:#F7F7FA;
font-size:24rpx;
color:#8A8A8A;
box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa;
z-index: 9999;
}
.tabBar-item{
float:left;
width:20%;
text-align: center;
overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
color:red;
}
.navigator-hover{
background-color: rgba(0, 0, 0, 0);
}
3.创建template.js,初始化数据
//初始化数据
function tabbarinit() {
return [
{
"current": 0,
"pagePath": "/pages/dashboard/index",
"iconPath": "/images/goback.png",
"text": "返回商城"
},
{
"current": 0,
"pagePath": "/pages/collage/index",
"iconPath": "/images/collage1.png",
"selectedIconPath": "/images/collage.png",
"text": "拼团首页"
},
{
"current": 0,
"selectedIconPath": "/images/list.png",
"iconPath": "/images/list1.png",
"pagePath": "/pages/collage-list/index",
"text": "活动列表"
},
{
"current": 0,
"selectedIconPath": "/images/collage-order.png",
"iconPath": "/images/collage-order1.png",
"pagePath": "/pages/collage-order/index",
"text": "我的订单"
},
{
"current": 0,
"selectedIconPath": "/images/group.png",
"iconPath": "/images/group1.png",
"pagePath": "/pages/group/index",
"text": "我的团"
}
]
}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
var that = target;
var bindData = {};
var otabbar = tabbarinit();
otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
otabbar[id]['current'] = 1;
bindData[bindName] = otabbar
that.setData({ bindData });
}
module.exports = {
tabbar: tabbarmain
}
4.使用方法
- 先把样式文件载入app.wxss
@import "/template/template.wxss";
- 新建一个页面,比如index.wxml,引入模板
<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
- index.js 初始化数据
var template = require('../../template/template.js');
Page({
onLoad: function () {
template.tabbar("tabBar", 0, this)//0表示第一个tabbar
},
})
- 其它新建页面也跟index.wxml一样,初始化数据。
--------------------------------------------------------------------------------------------------------------------------------------------
在电脑上运行正常,但真机调试时,出现错误: Error: module "template/template.js" is not defined
已经解决了?
var template = require('../../template/template.js'); Page({ onLoad: function () { template.tabbar("tabBar", 0, this)//0表示第一个tabbar }, })
改为:
Page({ onLoad: function () { var template = require('../../template/template.js'); template.tabbar("tabBar", 0, this)//0表示第一个tabbar }, }) 就ok了
建议使用官方的插件,也可以把官方的插件自定义。那个还不错。可以试试
路径问题,不要用相对路径,改成绝对路径试试