微信小程序自定义底部导航栏组件

先看效果图

实现方式为将底部导航栏封装成组件, 在tabBar界面中引用, 下面是步骤和代码:

1.在根目录, 也就是pages同级目录下创建components文件夹, 然后在components文件夹下创建tabBar文件夹, tabBar文件夹下新建index.js, index.json, index.wxml, index.wxss这四个文件, 如图:

2.tabBar/index.json的代码

{"component": true
}

3.tabBar/index.wxml的代码(data-tab的值为对应的页面)

<tabBar class="tabBar"><view data-tab="index" bindtap="onTab"><image class="tab-img" hidden="{{tab == 'index'}}" src="/images/green/index2.png" mode="widthFix" style="width: 50rpx;"></image><image class="img2 tab-img" hidden="{{tab != 'index'}}" src="/images/green/index1.png" mode="widthFix"></image><view class="tab-title">首页</view></view><!-- network --><view data-tab="category" bindtap="onTab"><image hidden="{{tab == 'category'}}" src="/images/fenlei1.png" mode="widthFix" style="width: 50rpx;"></image><image class="img2" hidden="{{tab != 'category'}}" src="/images/fenlei2.png" mode="widthFix"></image><view>分类</view></view><view data-tab="msg" bindtap="onTab"><image hidden="{{tab == 'msg'}}" src="/images/green/xiaoxi2.png" mode="widthFix" style="width: 50rpx;"></image><image class="img2" hidden="{{tab != 'msg'}}" src="/images/green/xiaoxi1.png" mode="widthFix"></image><view>消息</view></view><view data-tab="admin" bindtap="onTab"><image hidden="{{tab == 'admin'}}" src="/images/green/wode2.png" mode="widthFix" style="width: 50rpx;"></image><image class="img2" hidden="{{tab != 'admin'}}" src="/images/green/wode1.png" mode="widthFix"></image><view>我的</view></view>
</tabBar>

3.tabBar/index.wxss的代码

.tabBar{position:fixed;width: 100%;height: 100rpx;bottom: 0;color: #333;font-size: 24rpx;display: flex;justify-content: space-around;padding:  10rpx 0 20rpx 0;background-color: #fff !important;/* border-top: solid 1rpx #ccc; */box-shadow: -10rpx -3rpx 30rpx #EAEAEA;text-align: center;
}
.img2{width: 150rpx;height: 150rpx;margin-top: -80rpx;
}
.tabBar > view{width: 150rpx;
}

4.tabBar/index.js的代码

const app = getApp()
Component({properties: {tab: String},observers:{ //监听数据的更改"tab"(data){this.data.tab = data //这里不要写this.setData({})}},externalClasses: ['my-class'],methods: {data: {tab: ''},onTab: function (e) {wx.switchTab({url: '/pages/' + e.currentTarget.dataset.tab + '/' + e.currentTarget.dataset.tab})}}
})

5.剩下的就是引入, 以index示例.

index.json中的代码:

"usingComponents": {"tabBar":"../../components/tabBar/index"}

index.wxml中的代码(在最下方添加):

<tabBar tab="index"></tabBar>

图片换成自己的图片就行, 现在切换页面的时候, 文本还是会出现轻微移动, 以后有时间会再去完善它. 或者大家有办法, 也可以写出来.

差点忘了写, 大家记得在app.json中添加tabBar页面

"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "pages/index/index",  //你自己的页面"text": "组件"},{"pagePath": "pages/logs/logs","text": "接口"},{"pagePath":"pages/category/category","text":"分类"}]}

微信小程序自定义底部导航栏组件相关推荐

微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
你会微信小程序自定义底部导航栏吗？
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...

微信小程序自定义底部导航栏组件

微信小程序自定义底部导航栏组件相关推荐

最新文章

热门文章