微信小程序自定义tabbar组件（用于和微信自带tabbar外其他界面）
前面把两个自定义花式的写了，哈哈，现在来写个简单的，注意哦：app.json里用了自带tabbar的那几个主页面不要引用，不然也要在app.js里去隐藏哦。
哦，对了，有个坏处就是，tabbar会闪，不过你们看着要求来呗。
这是微信自带的，记得也用上哦，后面需要显示出这个tabbar的话在引用模板
我的模板文件叫template
首先是template.wxml
{{item.text}}
接着是template.wxss代码
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 95rpx; /*footer的高度*/
background: #fff;
z-index: 500;
border-top: 1rpx solid #e9e9e9;
display: flex;
flex-direction: row;
}
.footer_list {
width: 17%;
height: 100%;
text-align: center;
padding-top: 8rpx;
margin-left: 60rpx;
margin-right: 62rpx;
}
.footer-image {
width: 45%;
height: 55%;
}
.footer-text {
font-size: 20rpx;
margin-top: -5rpx;
}
最后是template.js代码
// pages/template/template.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
curIdx: 1,
listInfo: [{
text: '首页',
imgUrl: '/pages/img/footer-i1.png',
curUrl: '/pages/img/footer-i1h.png',
},
{
text: '产品分类',
imgUrl: '/pages/img/footer-i2.png',
curUrl: '/pages/img/footer-i2h.png',
},
{
text: '个人中心',
imgUrl: '/pages/img/footer-i3.png',
curUrl: '/pages/img/footer-i3h.png',
},
]
},
// 底部导航
chooseImg: function(e) {
this.setData({
curIdx: e.currentTarget.dataset.current
})
console.log("kk", e.currentTarget.dataset.current)
if (e.currentTarget.dataset.current == 0) {
wx.switchTab({
url: '/pages/index/index',
})
} else if (e.currentTarget.dataset.current == 1) {
wx.switchTab({
url: '/pages/classify/classify',
})
} else if (e.currentTarget.dataset.current == 2) {
wx.switchTab({
url: '/pages/person/person',
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
然后呢，是app.json代码
{
"pages": [
"pages/index/index",
"pages/template/template",
"pages/classify/classify",
"pages/person/person",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "white",
"navigationBarTitleText": "你的程序名称",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#363636",
"selectedColor": "#363636",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/pages/img/footer-i1.png",
"selectedIconPath": "/pages/img/footer-i1h.png"
},
{
"pagePath": "pages/classify/classify",
"text": "产品分类",
"iconPath": "/pages/img/footer-i2.png",
"selectedIconPath": "/pages/img/footer-i2h.png"
},{
"pagePath": "pages/person/person",
"text": "个人中心",
"iconPath": "/pages/img/footer-i3.png",
"selectedIconPath": "/pages/img/footer-i3h.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
然后呢，在别的页面引用
注意哦：index，classify， person不要引用，不然会重复的，你的组件样式就会变化的，多重了。
比如在detail里引用
detail.wxml代码
detail.wxss代码
@import "../../template/template.wxss";
最后是detail.js代码
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
curIdx: 1,
listInfo: [{
text: '首页',
imgUrl: '/pages/img/footer-i1.png',
curUrl: '/pages/img/footer-i1h.png',
},
{
text: '产品分类',
imgUrl: '/pages/img/footer-i2.png',
curUrl: '/pages/img/footer-i2h.png',
},
{
text: '个人中心',
imgUrl: '/pages/img/footer-i3.png',
curUrl: '/pages/img/footer-i3h.png',
},
]
},
// 底部导航
chooseImg: function (e) {
this.setData({
curIdx: e.currentTarget.dataset.current
})
console.log("kk", e.currentTarget.dataset.current)
if (e.currentTarget.dataset.current == 0) {
wx.switchTab({
url: '/pages/index/index',
})
} else if (e.currentTarget.dataset.current == 1) {
wx.switchTab({
url: '/pages/classify/classify',
})
} else if (e.currentTarget.dataset.current == 2) {
wx.switchTab({
url: '/pages/person/person',
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
好了，以上就是所有代码了。溜了！！！