微信小程序 手写底部导航 组件模板

效果展示

先创建组件

Click_Bar.wxml

<!-- 底部导航 -->
<view class='boxs_2'>
  <view bindtap='Click_Bar' data-bar_index='{{0}}'>
    <image src="../../Image/shouye_s.png" wx:if="{{bar_index==0}}"></image>
    <image src="../../Image/shouye.png" wx:else></image>
    <view class='{{bar_index==0?"view_selt":""}}'>
      首页
    </view>
  </view>
  
  <view class='big_img' bindtap='Click_Bar' data-bar_index='{{1}}'>
    <image src="../../Image/tianbao.png" class='tianbao'></image>
    <view style='padding-top:28px' class='{{bar_index==1?"view_selt":""}}'>
      志愿填报
    </view>
  </view>

  <view bindtap='Click_Bar' data-bar_index='{{2}}'>
    <image src='../../Image/wode_s.png' wx:if="{{bar_index==2}}"></image>
    <image src='../../Image/wode.png' wx:else></image>
    <view class='{{bar_index==2?"view_selt":""}}'>
      我的
    </view>
  </view>
</view>

Click_Bar.wxss

.boxs_2 {
  width: 650rpx;
  /* height: 100rpx; */
  display: flex;
  position: fixed;
  bottom: 0px;
  padding: 10rpx 50rpx;
  color: #000;
  justify-content: space-between;
  background-color: #fff;
  font-size: 28rpx;
  box-shadow: 0rpx 2rpx 50rpx 6rpx #8bbce4;
}

.boxs_2 view {
  text-align: center;
}
/* 选中 Bar */
.boxs_2 .view_selt{
	color: #5074ff
}

.boxs_2 image {
  width: 50rpx;
  height: 50rpx;
}
.boxs_2 .big_img .tianbao {
  position: absolute;
  top: -25px;
  width: 50px;
  height: 50px;
  margin-left: 50%;
  left: -25px;
}

Click_Bar.js 页面

 properties: {
      bar_index: Number //组件传进来的 页面位置。根据页面位置确定跳转的目标页面
      // 我设定的  首页 0，志愿填报 1，我的 2
  },

const navigate = {
  shouye: "../../pages/index/index",
  logs: "../../pages/logs/logs",
  wode: "../../pages/mine/mine",
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    bar_index: Number //组件传进来的 页面位置。根据页面位置确定跳转的目标页面
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

	pageLifetimes: {
		// 组件所在页面的生命周期函数
		show() { },
		hide() { },
		resize() { },
	},

  /**
   * 组件的方法列表
   */
  methods: {
    Click_Bar: function(e) {
      var that = this;
      var Bar_index = this.data.bar_index;
      var sel_index = e.currentTarget.dataset.bar_index
      if (Bar_index != sel_index) {
        var url = ""
	 	switch (sel_index) {
          case 0:
            url = navigate.shouye;
            break;
          case 1:
            url = navigate.logs;
            break;
          case 2:
            url = navigate.wode;
            break;
        }
		if (sel_index==1){
          wx.navigateTo({
			url: url,
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
			})
			return
		}
        wx.reLaunch({
          url: url,
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      }
    },
  }
})

Click_Bar.json

{
	"component": true,
	"usingComponents": {}
}

下面是在 各个页面中的调用。index为例子

1. 在index.json 中引入组件

{
	"usingComponents": {
		"Bar_comp": "/Component/Click_Bar/Click_Bar",
	},
	"navigationBarTitleText": "组件使用"
}

2. index.wxml 中引用

<Bar_comp bar_index="{{bar_index}}"></Bar_comp>
//bar_index 为当前页面的位置。用于判断组件在哪个页面触发的。
//也可以直接写上易于区分的数据

3. index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    bar_index: 0 // 也卡已直接写在 index.wxml 里
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },