【微信小程序自定义底部tabbar】

最新推荐文章于 2024-06-22 13:40:14 发布
最新推荐文章于 2024-06-22 13:40:14 发布
阅读量347 收藏 2
点赞数
分类专栏： 微信小程序 前端 文章标签： 微信小程序 javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55546349/article/details/125303057
版权
本文详细介绍了在微信小程序中自定义底部tabbar的关键步骤，包括在app.js中配置，以及在custom-tab-bar组件的onshow事件中设置selected属性为4，用于指定选中的tab位置。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述

app.js

{
   
    "pages": [
        "pages/index/index",
        "pages/saleMng/saleMng",
        "pages/newsMng/newsMng",
        "pages/my/my"
    ],
    "tabBar": {
   
        "custom": true,
        "color": "#6b6c75",
        "selectedColor": "#FF3B3B",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
   
                "pagePath": "pages/index/index",
                "iconPath": "/img/icon/tabIcon1.png",
                "selectedIconPath":   "/img/icon/tabIcon1-.png",
                "text": "首页"
            },
            {
   
                "pagePath": "pages/saleMng/saleMng",
                "iconPath": "/img/icon/tabIcon2.png",
                "selectedIconPath":   "/img/icon/tabIcon2-.png",
                "text": "采销"
            },
            {
   
                "pagePath": "pages/newsMng/newsMng",
                "iconPath": "/img/icon/tabIcon4.png",
                "selectedIconPath":   "/img/icon/tabIcon4-.png",
                "text": "消息"
            },
            {
   
                "pagePath": "pages/my/my",
                "iconPath": "/img/icon/tabIcon5.png",
                "selectedIconPath":   "/img/icon/tabIcon5-.png",
                "text": "我的"
            }
        ]
    },
    "window": {
   
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
}

custom-tab-bar/index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <!-- <view class="tab-bar-border"></view>
最低0.47元/天 解锁文章
常安cc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
hangGe0111的博客
12-29 4万+
1.在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏； 2.代码部分 2.1首先在app.json的window中配置"navigationStyle": "custom"（使用自定头部导航栏） 2.2导航栏组件部分 （1）custom-component.wxml &lt...
自定义链接照妖镜.zip
07-31
通过生成链接进行拍照
微信小程序开发---自定义底部tabBar
weixin_73318685的博客
06-22 1841
实现步骤：1.在app.json中的tabBar项指定custom字段值为 true，同时其余tabBar相关配置也补充完整。 2.在代码根目录下添加入口文件添加 tabBar 代码文件，文件名必须为 custom-tab-bar，必须在根目录处添加（与page文件同级）。3.编写tabBar代码。4. 实现tabBar选中态
微信小程序——自定义导航栏
呆子小木心的博客
06-13 2095
微信小程序——自定义导航栏 官方文档的一些介绍： 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： 现在具体说一下实现步骤及使用方法： 步骤： 1，在 app.json 里面把 “navigationStyle” 设置为 “custom”，这样子之后就只会保留右上角胶囊按钮了。 "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroun
微信小程序 顶部自定义导航 “navigationStyle“: “custom“ 真机iPhone6/7/8不显示胶囊按钮
li222248的博客
01-14 7498
微信小程序 顶部自定义导航 “navigationStyle”: “custom” 要实现这种效果图 1、在哪个页面上实现自定义导航栏就在哪个页面的 .json 文件中写上： “navigationStyle”: “custom” ，如果在app.json写那就是所有的页面都会变成通栏 { "component": true, "navigationStyle": "custom" } 2、页面的.wxml代码： <view class="navbar" style="height:{{n
微信小程序 页面配置文件
Vue1024的博客
10-20 789
微信小程序 页面配置 // pages/demo01/demo01.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */
微信小程序："navigationStyle":"custom"
热门推荐
oopxiajun博客专栏
05-06 2万+
参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html 今天折腾了半天这个"navigationStyle":"custom"，让小程序顶部栏自定样式。 第一个问题：是整个小程序全局都自定义吗？还是部分页面自定义（单独某一个页面自定）？ 全局都自定义请在app.json的...
微信小程序自定义底部 tabbar的两个方法
FOR 的博客
07-31 6611
这里记一下微信小程序自定义 tabbar 的方法 ，一个是官方给出的 。 一个是我在尝试的过程中想到的。 官方文档给了一个自定义tabbar 的方法 。 这个方法需要注意一下几点 ： 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组
微信小程序自定义tabBar,中间圆形凸起
05-31
综上所述，通过自定义`tabBar`组件，我们可以实现微信小程序中中间圆形凸起的效果，同时支持深色模式和iPhoneX系列底部横线的自适应。这不仅提升了用户体验，也为我们的小程序赋予了更多个性化的元素。
微信小程序官方动态自定义底部tabBar的例子
10-16
微信小程序官方动态自定义底部tabBar是一种实现动态切换底部导航菜单的方式，它可以根据用户的实际需求，实现更加灵活和个性化的底部tabBar展示效果。本文将详细介绍微信小程序官方提供的动态自定义底部tabBar的实现...
微信小程序自定义tabbar中间突起样式
04-20
在微信小程序中，`tabbar` 是一个基础且重要的组件，它通常位于页面底部，用于展示应用的主要功能模块，方便用户快速切换。本文将深入探讨如何在微信小程序中自定义`tabbar`，特别是实现中间突起的样式。 1. **...
微信小程序自定义tabBar组件开发详解
10-17
由于微信小程序自定义tabBar组件的代码示例和具体实现方法已经在给定文件的内容部分展示，开发者可以参考提供的代码和逻辑，结合自己的项目需求进行相应的调整和开发。通过这种自定义开发，开发者可以更灵活地控制...
uniapp - 微信小程序 - 自定义底部tabbar
最新发布
06-26
在开发微信小程序或基于uniapp框架的应用时，自定义底部tabbar是一项常见的需求。底部tabbar作为用户界面的重要组成部分，通常包含多个图标和文字，用于切换不同的页面或功能区域。本篇文章将深入探讨如何在uniapp中...
uniapp navigationStyle: custom 取消默认原生导航栏 导致页面顶部 进入状态栏区域问题
tengyuxin的博客
09-15 2898
关于style和background两个字段，虽然一个管理状态栏的前景颜色，一个管理系统状态栏的背景色，但是这种配置权限不高，容易被pages.json内部配置覆盖，也不灵活，所以我就没有使用。在uniapp官网 全局文件 --> manifest.json应用配置--> App完整manifest.json里面，之后全局全局搜索(ctrl+f) statusbar的配置。第二，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设为false。
uni-app导航栏和状态栏配置
qq_41113498的博客
06-04 2534
1. 导航栏 原生导航优点 ① 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 ② 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 原生导航缺点：原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 1.1 原生导航栏—通用配置 uni-app 自带原生导航栏，在pages.json里配置。参考官网uni-app导航栏开发
【微信小程序】 自定义导航栏（navigationStyle=custom）
sayyy的专栏
09-17 6472
前言 基础库 2.12.0 开发者工具 1.03.2008270 自定义导航栏 navigationStyle 可用的值为：default 默认样式、custom 自定义导航栏（只保留右上角胶囊按钮）。自微信客户端 7.0.0（基础库 2.5.2）开始支持。 在哪里定义 navigationStyle 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。 示例： { "navigationStyl
ROSNOTE : 自动拍照
woodgril的博客
11-03 1万+
参考原文是：链接1、链接2、链接3 #!/usr/bin/env python # coding:utf-8 import os import cv2 import time cam=cv2.VideoCapture(2) count=1 print("开始拍摄～") while(True): ret,img=cam.read() cv2.imwrite("/home/robot/pictures/auto_pictures/" + str(count).
uniapp 电商小程序 去掉默认标题，改为自定义的形式 navigationStyle:custom
yehaocheng520的博客
07-14 5087
这个是我的页面，此部分内容为用户信息。 为了美观，可以取消标题栏的默认样式default，可以改为custom的样式 如上图所示，只需要更改一个参数即可实现变化。 page.json 修改 "navigationStyle": "custom"即可 ...
uniapp 微信小程序自定义底部tabbar
05-07
UniApp 是一个使用 Vue.js 开发跨平台应用的前端框架，它支持将代码一次编写，即可发布到多个平台，包括微信小程序。在 UniApp 中，自定义底部 tabbar 非常简单，只需要在 pages.json 中指定 tabBar 配置，然后在页面中使用自己的自定义 tabbar 组件即可。 以下是自定义底部 tabbar 的步骤： 1. 在 pages.json 文件中设置 tabBar 配置，如下所示： ```javascript { "tabBar": { "custom": true, // 使用自定义的tabBar "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabbar/home.png", "selectedIconPath": "/static/tabbar/home-active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "/static/tabbar/user.png", "selectedIconPath": "/static/tabbar/user-active.png" } ] } } ``` 2. 在页面中引入自己的自定义 tabbar 组件，并使用该组件替换默认的 tabBar，如下所示： ```javascript <template> <view> <router-view /> <my-tab-bar :list="list" :active.sync="active" /> </view> </template> <script> import MyTabBar from '@/components/MyTabBar.vue' export default { components: { MyTabBar }, data () { return { active: 0, list: [ { text: '首页', icon: '/static/tabbar/home.png', selectedIcon: '/static/tabbar/home-active.png', path: '/pages/index/index' }, { text: '我的', icon: '/static/tabbar/user.png', selectedIcon: '/static/tabbar/user-active.png', path: '/pages/user/user' } ] } } } </script> ``` 以上是自定义底部 tabbar 的简单介绍，如果您需要更详细的内容，请查看 UniApp 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值