小程序自定义带凹的tabbar

1、在app.json文件找到“tarBar”对象，然后添加一个属性，代码如下：

"tabBar": {"custom": true, //是否自定义"color": "#000000","selectedColor": "#fec248","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/catetory/index","text": "门禁"},{"pagePath": "pages/my/index","text": "我的"}]},

2、在pages文件夹同级目录下，新建一个文件夹，文件夹名称为 “custom-tab-bar” ，个人认为创建时生成component，

3、wxhl,wxss,js等自己动手丰衣足食

想要我自己写，不可能，不可能，绝对不可能！

wxml代码

<view class="tab-bar-container"><view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path=" {{item.pagePath}}" data-index="{{index}}"  bindtap="switchTab"><image class="{{ index === 1 ? 'entrance' : ''}}"src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><text style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</text></view></view><view class="tab-bar-bottom"><view class="left"></view><view class="middle"></view><view class="right"></view></view></view>

css代码

/* 部分样式需自行修改大体不变但没得底色，且这个css是中部凹陷的 */
.tab-bar-container {position: fixed;bottom: 0;left: 0;right: 0;z-index: 2;overflow: visible;
}.tab-bar {position: relative;height: 120rpx;width: 100%;background-color: transparent;padding-top: 24rpx;display: flex;overflow: visible;z-index: 2;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: flex-end;overflow: visible;align-items: center;flex-direction: column;
}.tab-bar-item image {width: 40rpx;height: 40rpx;overflow: visible;
}.tab-bar-item text {margin-top: 6rpx;font-size: 22rpx;font-weight: 500;padding-bottom: 20rpx;
}.tab-bar-item .entrance {width: 90rpx;height: 90rpx;position: absolute;border-radius: 45rpx;top: -24rpx;box-shadow: 0px 0px 3px 0px rgba(255, 93, 51, 0.50);
}
.tab-bar-bottom {display: flex;position: fixed;width: 100%;bottom: 0;z-index: 1;filter: drop-shadow(0 0 4px lightgray);
}.tab-bar-bottom .left {min-height: 120rpx;flex: 1;background: white;border-top-right-radius: 20rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-bottom .middle {min-height: 120rpx;width: 104rpx;position: relative;background: radial-gradient(circle at 50% 0rpx, transparent 56rpx, white 0) top left 100% no-repeat;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);overflow: hidden;
}
.tab-bar-bottom .right {min-height: 120rpx;flex: 1;background: white;border-top-left-radius: 20rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

js代码

Component({data: {selected: 0,color: "#605f5e",selectedColor: "#ff5d33",list: [{text: "首页",selectedIconPath: '/images/home-active.png',iconPath: '/images/home.png',pagePath: "/pages/index/index"},{text: "门禁",selectedIconPath: '/images/open-active.png',iconPath: '/images/open.png',pagePath: "/pages/jsba/index"},{text: "我的",selectedIconPath: '/images/mine-active.png',iconPath: '/images/mine.png',pagePath: "/pages/my/index"}],},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})}}})

样式如此

4、最重要的来了：在为tabbar页面的js文件里面的onShow里面加上这段代码即可

onShow: function () {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 1   //该值为你需要判断参数})}},

注意!注意!注意!

每个tabbar页面的selected值不同，对应的“custom-tab-bar”中data的list数组中的下标，this.getTabBar()其实返回的就是自定义的那个tabbar组件“custom-tab-bar” js里面的东西(可自行打印查看)，然后执行setData去修改selected的值，从而让样式正常显示

小程序自定义带凹的tabbar相关推荐

html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
微信小程序自定义顶部以及底部tabbar
1.首先建立一个模板,在里边模板的wxml里绘制公共的顶部以及底部代码如下:  <template name= ...
微信小程序自定义带金额的日历组件
// component/dateSelect/dateSelect.jsComponent({/*** 组件的属性列表*/properties: {timeData: {type: Array,va ...
小程序自定义tabbar踩坑笔记
最近在给客户做一个定制小程序,客户不喜欢小程序自带的tabbar,想要一个炫酷的异形的tabbar,翻看了小程序开发者文档是可以执行的. 参考官方网站,自定义tabBar 自定义 tabBar | 微 ...
微信小程序自定义导航栏与自带下拉刷新冲突
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求.而问题就一而再 ...
小程序（三）配置tabbar及自定义tabbar样式
关于tabbar部分,官方文档是有明确的说明的,当然,我这里是不存在把官方文档给你复制一遍的情况.我大概把我再看官方文档过程中遇到的坑,大概复述一下. 一:配置tabbar 这个主要是使用小程序自带的 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容
小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容参考文章: (1)小程序自定义tabbar custom-tab-bar 6s出不来解决方案,c ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...

小程序自定义带凹的tabbar

小程序自定义带凹的tabbar相关推荐

最新文章

热门文章