taro之--微信自定义tabbar

这篇具有很好参考价值的文章主要介绍了taro之--微信自定义tabbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序自定义 Tabbar

Taro 支持使用 React、Vue、或者小程序原生语法来编写小程序自定义 TabBar 组件。

示例项目

  • 微信小程序自定义 TabBar(React)

  • 微信小程序自定义 TabBar(Vue3)

如何使用

配置方法和微信小程序相同,开发前请仔细阅读 《微信小程序自定义 TabBar 文档》。

配置信息

  • 在 app.config 中按正常填写 tabBar 项的相关配置(为了向下兼容),并把 tabBar 项的 custom 字段设置为 true。

  • 所有作为 TabBar 页面的 config 里需要声明 usingComponents 项,也可以在 app.config 设置全局开启。

示例:

app.config.js

export default {
  tabBar: {
    custom: true,
    color: '#000000',
    selectedColor: '#000000',
    backgroundColor: '#000000',
    list: [
      {
        pagePath: 'page/component/index',
        text: '组件',
      },
      {
        pagePath: 'page/API/index',
        text: '接口',
      },
    ],
  },
}

page/component/index.config.js

export default {  navigationBarTitleText: '组件页',  usingComponents: {},}

page/API/index.config.js

export default {  navigationBarTitleText: '接口页',  usingComponents: {},}

添加 custom-tab-bar

src 目录下添加 custom-tab-bar 目录,在里面书写组件,支持 React、Vue 和原生写法。

React:

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.jsx
└── package.json

Vue:

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.vue
└── package.json

原生写法:

├── config
├── src
|   └── custom-tab-bar
|       ├── index.js
|       ├── index.json
|       ├── index.wxss
|       └── index.wxml
└── package.json

图片资源引用

使用 React/Vue 开发自定义 TabBar 时,可以不使用 import 或 require 引用图片资源(Taro 会自动根据 TabBar 配置处理)。

如果使用了 import、require 或使用 background-image 时需要关注图片是否被 url-loader 处理为 base64,base64 的图片在 TabBar 中不能展示。

状态管理

默认 TabBar 与自定义 TabBar 的最大不同点在于,默认 TabBar 在所有 TabBar 页共享一个组件实例,而自定义 TabBar 在各个 TabBar 页面初始化时都会创建一个新的组件实例

也就是说各个 TabBar 页内的自定义 TabBar 组件实例的状态是不共享的。因此对 TabBar 的状态管理(例如 selected 选中态)则尤为重要。

对于不同写法的自定义 TabBar,Taro 提供了不同的状态管理方案:

1. 原生写法

微信小程序原生写法推荐使用 getTabBar 方法进行管理,如果你的自定义组件是使用原生写法编写的,那么可以参考小程序官方提供的示例。

唯一需要注意的是,在小程序原生页面是调用 this.getTabBar,但 Taro 的页面是 React/Vue 组件,this 指向的并不是原生页面对象。因此需要先获取原生页面对象再进行调用:

// 页面 onShow 时Taro.getCurrentInstance().page.getTabBar()
2. React / Vue

React 和 Vue 推荐使用状态管理工具(Redux、Vuex 等)对 TabBar 页的状态进行管理。优点在于无须侵入各个 TabBar 页面的代码,逻辑可以归集在 TabBar 组件中。

如果开发者不希望使用状态管理工具,Taro 提供了 Taro.getTabBar API 以获取自定义 TabBar 组件(React/Vue 组件),然后开发者可以调用它上面的方法去更新 TabBar 组件的状态。

// 页面 onShow 时const pageObj = Taro.getCurrentInstance().pageconst tabbar = Taro.getTabBar(pageObj)
示例项目 中提供了两个例子,React 版本的例子展示了如何使用 Taro.getTabBar 管理状态,Vue3 版本的例子则展示了如何使用状态管理工具来管理状态。

组件配置项

自定义 TabBar 组件使用小程序的 Component 构造器构造,开发者在处理样式隔离等问题时可以需要对 Component 进行配置。这时开发者可以给 React/Vue 编写的自定义组件这些配置项属性,Taro 会把它们放置到 Component 构造对象上,目前支持:options、externalClasses、behaviors。

例子:

  • React

  • Vue

示例代码

// Class Component
class CustomTabBar extends Component {
  static options = {
    addGlobalClass: true,
  }
}

// Functional Component
function CustomTabBar() {}
CustomTabBar.options = {
  addGlobalClass: true,
}

常见问题

闪烁问题

第一次加载 TabBar 页时 TabBar 会闪烁

自定义 TabBar 在各个 TabBar 页面初始化时都会创建一个新的组件实例导致。可以到微信小程序开发者社区寻找相关解决方案。

切换 Tab 时图片闪烁

尽量使用本地图片或 iconfont。文章来源地址https://www.toymoban.com/news/detail-488126.html

到了这里,关于taro之--微信自定义tabbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序自定义tabBar简易实现

    index.wxml index.json index.js index.css 如果是componet的页面就直接再show中自己定义它的selected代表当前的选中态

    2024年02月03日
    浏览(43)
  • 微信小程序自定义tabBar(边框圆角)

    先看看自定义tabBar的效果     可能图片效果不是很明显,我用红框框出来了,这样看起来明显一点。 接下来就是具体步骤了  先在pages里建两个文件夹,我现在做的项目tabBar只有两个,所以我建了两个文件夹,如果大于两个用这个方法也可以,但是不能多于五个。 app.json中

    2024年02月08日
    浏览(52)
  • 微信小程序自定义tabbar闪烁问题

    闪烁问题原因:超过两个tabbar页不要单纯的使用官方说的show时getTabBar().setData设置选中态,自定义tabbar是多个实例的,那样只会改变当前tabbar实例的选中态,其他页面的tabbar实例并没有改变选中态。 解决tabbar闪烁问题: 1.在app.js中设置 globalData 2.在 custom-tab-bar/index.js 中设置

    2024年02月10日
    浏览(44)
  • 微信小程序 根据登录后的角色权限 渲染底部tabbar--自定义渲染tabbar

    微信小程序模拟登录后 根据不同角色权限 渲染底部tabbar (底部tabbar 用的是vant ui 提供的组件)  1.权限一: 拥有的底部栏如图 1.2 权限二: 拥有的底部栏 如图 1.3 定义全局属性用于存储底部的tabbar渲染 一:  首先在全局文件App.json 配置tabbar (最少2个 最多5个),并且配置页

    2024年02月02日
    浏览(53)
  • uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

    1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot=\\\'inactive-icon\\\'(选中的图标)和slot=\\\'inactive-icon\\\'(未选中的图标)自定义图片样式 u-tabbar组件默认已经为i

    2024年02月13日
    浏览(74)
  • 微信小程序自定义tabbar【中间凸起样式】

    效果预览 微信开发文档:自定义tabBar 一、配置信息 在 app.json 中的 tabBar 中指定 custom 字段为 true【允许使用自定义 tabBar】 在所有 tab 页 json 中申明usingComponents 项,或者在 app.json 中全局开启 在 list 中指定自己需要 tab 示例 二、添加 tabBar 代码文件 在代码根目录下添加custom-

    2024年02月10日
    浏览(51)
  • 微信小程序使用uniapp自定义tabbar

    第一步:在pages.json里定义自己tabbar路径,定义的时候只需要写上页面路径即可  第二步:自定义tabbar页面,为了实现点击动作的动态效果,需要用到watch监听父组件传来的值的改变  自定义tabbar页面全部代码 注:该页面可以直接用组件的方式来放,因为uniapp支持easycom模式,

    2024年02月13日
    浏览(47)
  • 微信小程序子页面自定义tabbar组件

    有时候微信小程序会遇到代码合并,就比如把B小程序代码迁移到A小程序,要使得B作为A小程序的一个子页面子功能。因为本身小程序都有tabbar,原来B也有,这时候就要给B子功能自定义一个tabbar底部导航栏。(注意,这个不是微信小程序自定义tabBar,不需要app.json中设置一个

    2024年02月08日
    浏览(51)
  • 微信小程序自定义tabBar,前端开发技能

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月22日
    浏览(39)
  • 微信小程序自定义 底部 tabbar (中间凸起)

    在与 pages 文件夹同级的地方新建 custom-tab-bar 文件夹,并新建 index.wxml 、index.wxss 、index.js 、index.json 四个文件夹 注意路径!!! 复制后会报错,把图片和页面路径改掉就好了!!! 提示: 不要无脑复制,复制到自己的项目中后记得更改图片、页面路径!!! 如需自定义 头

    2024年02月20日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包