小程序自定义导航栏搜索和自定义底部tab（动态切换）

自定义导航栏搜索：

首先看效果图大概是这样，样式可以自己细化：

 那么这个时候就需要粘贴复制了，

首先在想要这个效果的相应页面的json里开启自定义导航，当然如果想全局每个页面都有那就在app.json。

"navigationStyle": "custom",

然后在pages或者自己能找到的路径创建自定义组件（commontents）文件夹，然后 创建custom文件夹用来放置组件，这个时候可以在开发者页面右键文件夹创建component文件，。会更方便

 接着就是各个文件的代码了，原理就是开启了自定义之后，把组件导入到页面中，然后再json里引入，在界面中使用标签就行，

再次声明：样式自己想要什么可以去改变，这里只是简单流程

wxml:

<!-- 自定义顶部导航 -->
<view class="search-input" style="height:{{navHeight}}px;padding-top:{{searchMarginTop}}px;">
    <view class="flex between input-box" style="height:{{searchHeight}}px;width: {{searchWidth}}px;">
      <i class="iconfont cs-search c9 mr10" bindtap="search"></i>
      <input class="v-expand f14 c3" value="{{search}}" placeholder="{{placeholder}}" placeholder-class="f14 c9" bindinput="inputValue" bindconfirm="search"/>
    </view>
</view>

wxss:这里要注意的是background的设置，这里的颜色是设置了自定义导航的头部导航背景色（换个颜色就明白了）

/* 自定义顶部导航 */
.search-input{
    position: sticky;
    box-sizing: border-box;
    //这里这里
    background: #eb4450;
    top: 0;
    z-index: 99;
  }
  .input-box{
    box-sizing: border-box;
    padding: 0 30rpx;
    margin: 0 30rpx;
    background: #f7f7f7;
    border-radius: 30rpx;
  }

js:

Component({
	properties: {
		// 控制是否禁用
		disabled: {
			type: Boolean,
			value: false,
		},
		// 值
		value: {
			type: String,
			value: ""
		},
		// 默认内容
		placeholder: {
			type: String,
			value: '请输入内容',
		},
		// 搜索框宽度
		searchWidth: {
			type: Number,
			value: 0
		},
		// 跳转链接
		toUrl: {
			type: String,
			url: ""
		},
		// 搜索框边距
		navMargin: {
			type: Number,
			value: 20
		},
		// 导航栏颜色
		navbackcolor: {
			type: String,
			value: "#eb4450"
		},
		// 搜索框的背景颜色
		inpbackcolor: {
			type: String,
			value: "white"
		},
		// 与胶囊的距离
		inpMarginView: {
			type: Number,
			value: 10
		}

	},
	data: {
		// 状态栏高度
		statusBarHeight: 0,
		// 搜索框上边距
		searchMarginTop: 0,
		// 搜索框高度
		searchHeight: 0,
		// 最外层盒子高度
		navHeight: 0
	},
	methods: {
		toGo() {
			if (this.data.toUrl == "") {

				return false
			}
			wx.navigateTo({
				url: this.data.toUrl,
			})
		},
		enterValue(e) {
			this.setData({
				value: e.detail.value
			})
			this.handchange()
		},
		inputValue(e) {
			this.setData({
				value: e.detail.value
			})
			this.handchange()
		},
		handchange() {
			// 父组件中使用bind:success调用
			this.triggerEvent('success', {
				value: this.data.value
			})
		},
		blurValue() {
			this.setData({
				value: ""
			})
		}
	},
	//生命周期组件在视图层布局完成后执行-跟mouted差不多
	ready: function () {
		// 1.获取菜单按钮（右上角胶囊按钮）的布局位置信息
		const {
			top,
			width,
			height,
			right
		} = wx.getMenuButtonBoundingClientRect()

		//2. 获取系统信息-设置自定义导航栏的
		wx.getSystemInfo({
			success: (res) => {
				// 获取状态栏高度
				const {
					statusBarHeight
				} = res

				// 获取胶囊按钮边距
				const margin = top - statusBarHeight

				this.setData({
					// 设置状态栏高度
					statusBarHeight: statusBarHeight,

					// 设置最外层盒子高度
					navHeight: (height + statusBarHeight + (margin * 2)),

					// 搜索框上边距 = 状态栏 + 胶囊按钮边距
					searchMarginTop: statusBarHeight + margin,

					// 搜索框宽度 = 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度，再减去两边间距 再减去与胶囊的距离
					searchWidth: right - width - this.data.navMargin - this.data.inpMarginView,

					// 搜索框高度
					searchHeight: height
				})
			},
		})
	},
})

json:

{
  "component": true
}

组件封装好之后在想要的页面的json中引入并且开启：

"navigationStyle": "custom",
"usingComponents": {
    "search":"../compontents/custom/custom"
  }

在页面中直接用标签:

//inpMarginView是距离右边胶囊按钮的距离
//想要什么点击事件可以添加
<search toUrl="/pages/searchOne/searchOne" inpMarginView="20"></search>

底部自定义tab的使用：

看效果：

 首先打开微信小程序引以为傲的开关是必然的：

要注意的是如果打开了开关之后，tabbar里的list已经不起作用了，会走后面创建的组件

{
  "tabBar": {
    //这个是必须的
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  //这个是必须的
  "usingComponents": {}
}

在文件根目录创建custom-tab-bar组件:

同样的使用右键创建pages，然后设置名称为index会更方便

 随后就是极其复杂的复制操作了：

注意：这里使用的是vant组件，因为方便，

json：

{
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

wxml:

做一下解释：利用tab组件插槽，根据js配置的传入相应的图片，默认选中第几个等，

第三个是突出的原型tab，所以给类名做样式；

<!-- custom-tab-bar/index.wxml -->
<van-tabbar placeholder="{{true}}" active="{{ active }}" bind:change="onChange">
    <van-tabbar-item>
        <image slot="icon" src="{{ icon.normal1 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        <image slot="icon-active" src="{{ icon.active1 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        首页
    </van-tabbar-item>
    <van-tabbar-item>
        <image slot="icon" src="{{ icon.normal2 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        <image slot="icon-active" src="{{ icon.active2 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        分类
    </van-tabbar-item>
//第三个突出的tab，自定义底部tab的意义所在！
    <van-tabbar-item>
        <view class="tab_search">
            <image class=".img" slot="icon" src="https://img0.baidu.com/it/u=1185313894,3490314805&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=755" mode="aspectFit" />
        </view>
    </van-tabbar-item>
    <van-tabbar-item>
        <image slot="icon" src="{{ icon.normal3 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        <image slot="icon-active" src="{{ icon.active3 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        购物车
    </van-tabbar-item>
    <van-tabbar-item>
        <image slot="icon" src="{{ icon.normal4 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        <image slot="icon-active" src="{{ icon.active4 }}" mode="aspectFit" style="width: 30px; height: 18px;" />
        我的
    </van-tabbar-item>
</van-tabbar>

js:

// custom-tab-bar/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    active:0,
    icon: {
    //不同的图片和切换之后的图片
      normal1: '../pages/static/img/home.png',
      active1: '../pages/static/img/home-a.png',
      normal2: '../pages/static/img/cate.png',
      active2: '../pages/static/img/cate-a.png',
      normal3: '../pages/static/img/cart.png',
      active3: '../pages/static/img/cart-a.png',
      normal4: '../pages/static/img/user.png',
      active4: '../pages/static/img/user-a.png',
    },
  },
  onChange(event) {
    const id = event.detail
    if (id==0) {
      wx.switchTab({
        url: '/pages/home/home',
      });
    }else if (id==1) {
      wx.switchTab({
        url: '/pages/cate/cate',
      });
    }else if (id==2) {
      wx.navigateTo({
        url: '/pages/searchOne/searchOne',
      });
    }else if (id==3) {
      wx.switchTab({
        url: '/pages/cart/cart',
      });
    }else if (id==4) {
      wx.switchTab({
        url: '/pages/user/user',
      });
    }
  },
})

wxss:

/* custom-tab-bar/index.wxss */
.tab_search{
    position: relative;
    bottom: 20px;
    background-color: rgb(170, 205, 243);
    border-radius: 80%;
    width: 70px;
    height: 70px;
    overflow: hidden;
    z-index: 999;
}
.tab_search .img{
    width: 120px;
    height: 120px;
    position: relative;
    right: 23px;
    bottom: 20px;
}

还有最重要的动态对应相应的页面：

假设现在切换到了其他tab页面；这个时候在这个页面的js中利用getTabBar（）来获取实例，然后动态修改默认选中（放的位置是onshow或者onload，推荐onshow）：

//获取到tabbar的实例
const tabBar = this.getTabBar()
    //实例调用修改动态数据
    tabBar.setData({
        //默认选中第几个底部tabbar，
        active: 0
    })

最后一个问题就是页面底部的高需要自己垫（用自定义插件的情况下）

基本实现tabbar

下面还有最重要的一步：

↓

↓

↓

↓

↓

复制。。。不，看的爽的话，给个三连8.(*^_^*)，栓q