微信小程序自定义Tabbar不会有跳转效果＋自定义顶部导航栏＋自适应全面屏
先来看一下效果
使用的插件是iview,不过要修改一下里面的内容
iview地址为:https://weapp.iviewui.com/
1.修改tab-bar-item里面的内容,直接替换即可
WXML:
<view class="i-class i-tab-bar-item">
<i-badge dot="{{ dot }}" count="{{ dot ? 0 : count }}">
<view class='i-cl'>
<i-icon wx:if="{{ icon || currentIcon }}" i-class="i-tab-bar-item-icon {{ current ? 'item-index--i-tab-bar-item-icon-current' : '' }}" color="{{ current ? currentColor : '' }}" type="{{ current ? currentIcon : icon }}" size="22">i-icon>
<image wx:else class="i-tab-bar-item-img" src="{{ current ? currentImg : img }}">image>
<view class="i-tab-bar-item-title {{ current ? 'i-tab-bar-item-title-current' : '' }}" wx:if="{{ current && currentColor }}" style="color: {{ currentColor }}">{{ title }}view>
<view class="i-tab-bar-item-title {{ current ? 'i-tab-bar-item-title-current' : '' }}" wx:else>{{ title }}view>
view>
i-badge>
view>
WXSS:
.i-tab-bar-item{flex:1;display:flex;width:100%;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;text-align:center}.i-tab-bar-item-icon{display:flex;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;color:#80848f}.i-tab-bar-item-icon-current{color:#2d8cf0}.i-tab-bar-item-img{display:flex;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;width:22px;height:22px}.i-tab-bar-item-title{font-size:10px;margin:3px 0 0;line-height:1;text-align:center;box-sizing:border-box;color:#80848f}.i-tab-bar-item-title-current{color:#2d8cf0}.i-tab-bar-item-img{display:flex;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;color:#80848f}.i-cl{display: flex;flex-direction: column;align-items: center;justify-content: center;}
2.修改tab-bar里面的内容
WXML:
<view style="bottom:{{heights}}rpx" class="i-class i-tab-bar {{ fixed ? 'i-tab-bar-fixed' : '' }}">
<slot>slot>
<view class="i-tab-bar-list">
<view class="i-tab-bar-layer" wx:for="{{ list }}" wx:key="{{ item.key }}" data-key="{{ item.key }}" bindtap="handleClickItem" style="width: {{ 100 / list.length }}%">view>
view>
view>
<view style="position:fixed;bottom:0;background:#fff;z-index:1;width:750rpx;height:100rpx">view>
JS:
const lib = require("../../utils/util.js") //这是判断屏幕显示区域高度的,只需要替换成自己的路径即可
Component({
externalClasses: ['i-class'],
relations: {
'../tab-bar-item/index': {
type: 'child',
linked() {
this.changeCurrent();
},
linkChanged() {
this.changeCurrent();
},
unlinked() {
this.changeCurrent();
}
}
},
properties: {
current: {
type: String,
value: '',
observer: 'changeCurrent'
},
color: {
type: String,
value: ''
},
fixed: {
type: Boolean,
value: false
}
},
pageLifetimes: {
show() {
this.setData({
heights: lib.getHeight()
})
}
},
data: {
list: [],
heights: 0
},
methods: {
changeCurrent(val = this.data.current) {
let items = this.getRelationNodes('../tab-bar-item/index');
const len = items.length;
if (len > 0) {
const list = [];
items.forEach(item => {
item.changeCurrent(item.data.key === val);
item.changeCurrentColor(this.data.color);
list.push({
key: item.data.key
});
});
this.setData({
list: list
});
}
},
emitEvent(key) {
this.triggerEvent('change', {
key
});
},
handleClickItem(e) {
const key = e.currentTarget.dataset.key;
this.emitEvent(key);
}
}
});
4.在外面新建一个文件夹
5.tabbar里面的内容
tabbar.json:
"component": true,
"usingComponents": {
"i-tab-bar": "../../dist/tab-bar/index",
"i-tab-bar-item": "../../dist/tab-bar-item/index"
}
tabbar.js:
const app = getApp();
Component({
//从父级引用
properties: {},
pageLifetimes: {
show() {
// 页面被展示
},
hide() {
// 页面被隐藏
},
resize(size) {
// 页面尺寸变化
}
},
/**
* 组件的初始数据
*/
data: {
current: '0'
},
/**
* 组件的初始数据方法
*/
ready() {},
/**
* 组件的方法列表
*/
methods: {
handleChange({ detail }) {
this.triggerEvent('key', detail.key) //这个地方是自定义方法,名称为"key",值为detail.key
this.setData({
current: detail.key
});
}
},
})
tabbar.wxml
<i-tab-bar current="{{ current }}" fixed="true" color="#f7712e" bindchange="handleChange">
<i-tab-bar-item key="0" img="/image/tabbars/index.png" current-img="/image/tabbars/indexsed.png" title="主页">i-tab-bar-item>
<i-tab-bar-item key="1" img="/image/tabbars/tooltable.png" current-img="/image/tabbars/tooltablesed.png" title="工具台">i-tab-bar-item>
<i-tab-bar-item key="2" img="/image/tabbars/square.png" current-img="/image/tabbars/squaresed.png" title="联盟广场">i-tab-bar-item>
i-tab-bar>
tabbar.wxss里面没有内容
6.新建一个controller,由于本人乱写的,只写了个control
7.controller里面的内容
controller.json
"usingComponents": {
"i-tab": "../../tabbar/tabbar",
"page1": "" //此处为想要更换的页面地址,我用了三个
},
"navigationStyle": "custom" //这个为取消掉头部导航
controller.js
// tenant/control/control.js
Page({
/**
* 页面的初始数据
*/
data: {
pages: "0",
tabs: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 接收到子组件的点击事件,进行加载页面
*/
tab({ detail }) {
this.setData({
pages: detail
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.setData({
tabs: wx.getSystemInfoSync().windowHeight
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
controller.wxml
<page1 class="{{pages==0?'':'none'}}">page1>
<page2 class="{{pages==1?'':'none'}}">page2>
<page3 class="{{pages==2?'':'none'}}">page3>
<view class="{{tabs<780?'tabs':'tabs-s'}}">view>
<i-tab bind:key="tab">i-tab>
controller.wxss
.none {
display: none;
}
.tabs {
height: 100rpx;
}
.tabs-s {
height: 160rpx;
}
8.自适应的Tabbar就结束了.附上until下面的js
util.js
const app = getApp();
function getHeight() {
if (wx.getSystemInfoSync().windowHeight > 780) {
return 60
} else {
return 0
}
}
module.exports = {
getHeight
}
9.自定义顶部导航栏
在app.js的globalData里写入
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] //自定义顶部导航栏
10.新建一个heards的文件夹
11.heards文件夹内容
heards.json
"component": true,
"usingComponents": {}
heards.js
const app = getApp();
Component({
//从父级引用
properties: {
roof: String
},
pageLifetimes: {
show() {
// 页面被展示
},
hide() {
// 页面被隐藏
},
resize(size) {
// 页面尺寸变化
}
},
/**
* 组件的初始数据
*/
data: {
statusBarHeight: app.globalData.statusBarHeight
},
/**
* 组件的初始数据方法
*/
ready() {},
/**
* 组件的方法列表
*/
methods: {
},
})
heards.wxml
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<text>{{roof}}text>
view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px">view>
heards.wxss
.custom {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
background: white;
z-index: 999;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom: 1px solid #f4f4f4;
}
.custom text {
color: #000;
font-size: 36rpx;
font-weight: bold;
max-width: 280rpx;
}
.empty_custom {
height: 45px;
width: 100%;
}
12.然后在需要的页面引入即可
比如:a.json
{
"usingComponents": {
"i-heard": "../../../heards/heards"
}
}
13.然后在页面写出来带入值即可
a.wxml
<i-heard roof="主页">i-heard>
结束,这样就会有跟小程序自带的Tabbar一样的效果啦