小程序自定义底部 tabbar 凸起

底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢

自定义tabbar

新建custom-tab-bar文件夹生成page

index.js

// custom-tab-bar/index.js
Component({/*** 组件的初始数据*/data: {selected: 0, // 当前选中的下标color: '#1e1e1e', // tabbar 未选中字体的颜色selectedColor: "", // tabbar 选中字体的颜色list: [ // tababr 循环数据集{"pagePath": "pages/TerminalInfo/Terminal","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "终端设备"},{ // 扫码是我要凸出的tab"pagePath": "pages/ScanCodes/ScanCodes","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","text": "终端扫码","isSpecial": true},{"pagePath": "pages/UserCenter/UserCenter","iconPath": "/image/132.jpg","selectedIconPath": "/image/132.jpg","text": "个人中心"}]},attached() {},methods: {switchTab(e) {let data = e.currentTarget.dataset;/*** 跳转页面为例* let url = data.path;*  this.setData({*      selected: data.index*  })*  // 跳转到 tabbar 页，关闭其他所有非 tabbar 页*  wx.switchTab({ url });* * 下面是不需要跳转页面为例*/if (!data.click) {let url = data.path;this.setData({selected: data.index})// 跳转到 tabbar 页，关闭其他所有非 tabbar 页wx.switchTab({ url });} else {// 扫码  凸起wx.scanCode({onlyFromCamera: true,success(res) {console.log(res)},fail(err) {console.log(err)wx.showToast({title: '扫码失败',icon: 'loading',duration: 1500})}})}}}
})

index.json

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

index.wxml

<view class="tab-bar"><view class="tab-bar-border"></view><block wx:for="{{list}}" wx:key="index"><view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab"><view class="special-image"><image class="special-image-pic" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image></view><view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view></view><view wx:else class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab"><image class="item-image" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view></view></block>
</view>

index.wxss

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 96rpx;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 2rpx;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item .item-image {width: 36rpx;height: 36rpx;
}
.tab-bar-item .special-image {position: absolute;top: -36rpx;width: 96rpx;height: 96rpx;border-radius: 50%;border-top: 2rpx solid #f2f2f3;background-color: #fff;text-align: center;box-sizing: border-box;padding: 6rpx;
}
.tab-bar-item .special-image .special-image-pic {width: 100%;height: 100%;
}.tab-bar-item .tab-text {margin-top: 4rpx;font-weight: 600;
}.tab-bar-item .special-text {margin-top: 44rpx
}.tab-bar-item .tab-text {font-size: 10px;
}

使用方法

app.json

"tabBar": {"custom": true,"color": "#000","selectedColor": "blue","backgroundColor": "#fff","borderStyle": "black","list": [{"pagePath": "pages/TerminalInfo/Terminal","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "终端设备"},{"pagePath": "pages/ScanCodes/ScanCodes","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","text": "终端扫码"},{"pagePath": "pages/UserCenter/UserCenter","iconPath": "/image/132.jpg","selectedIconPath": "/image/132.jpg","text": "个人中心"}]
}

app.js

// 设置tabbar的选中，添加一个全局方法
getCurrentTabbar(selected, that) {console.log(selected, that);if (typeof that.getTabBar === 'function' && that.getTabBar()) {that.getTabBar().setData({selected: selected})}
}

调用方法：

在使用的页面（组件）中调用app.getCurrentTabbar() 函数。

onShow() {app.getCurrentTabbar(1, this.route);
}

注意：每个自定义下的tabbar 页面都要调用一次，否则可能会出现第一次点击下标不跟随问题（这是点击后的效果）

参考：安琪拉屎
PS：仅作为笔记，方便下次查找，侵权私我，删帖。

微信小程序自定义tabbar 图标凸出效果相关推荐

微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...
微信小程序自定义底部栏凸起效果+自定义扫码详细介绍
项目结构: 主页面图: 扫码界面: 使用步骤如下: - **第一步**:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替 ...
微信小程序自定义TabBar和NavBar
先看效果图看似和正常开发的小程序布局相同,但代码却不相同,从而在自定义的代码中可以编写在默认模板中不能帮助我们完成的事情. 首先来说TabBar,这个内容的实现很容易,Flex布局嘛,除了这种很普通 ...

微信小程序自定义tabbar 图标凸出效果

小程序自定义底部 tabbar 凸起

自定义tabbar

新建custom-tab-bar文件夹生成page

使用方法

注意：每个自定义下的tabbar 页面都要调用一次，否则可能会出现第一次点击下标不跟随问题（这是点击后的效果）

微信小程序自定义tabbar 图标凸出效果相关推荐

最新文章

热门文章

微信小程序自定义tabbar 图标凸出效果

小程序自定义底部 tabbar 凸起

自定义tabbar

新建custom-tab-bar文件夹 生成page

使用方法

注意：每个自定义下的tabbar 页面都要调用一次，否则可能会出现第一次点击下标不跟随问题（这是点击后的效果）

微信小程序自定义tabbar 图标凸出效果相关推荐

最新文章

热门文章

新建custom-tab-bar文件夹生成page