微信小程序自定义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

<!-- 页面1 -->
<page1 class="{{pages==0?'':'none'}}"></page1>
<!-- 页面2 -->
<page2 class="{{pages==1?'':'none'}}"></page2>
<!-- 页面3 -->
<page3 class="{{pages==2?'':'none'}}"></page3>
<!-- 自定义tabbar,判断屏幕是否大于780px -->
<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">
    <!-- <image src="" mode="aspectFill" /> -->
    <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一样的效果啦