小程序Taro框架 自定义底部Tabbar,处理自定义Tab栏切换卡顿、闪烁

这篇具有很好参考价值的文章主要介绍了小程序Taro框架 自定义底部Tabbar,处理自定义Tab栏切换卡顿、闪烁。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最终效果

最近在用Taro框架开发一个小程序,有一个自定义底部Tabbar的需求,最终效果如下

taro.js 微信小程序底边栏,翻“坑”奇遇记,小程序,taro

起步

 这页是我第一次接触自定义小程序底部Tabbar,所有第一选择必然是相看官方文档:微信小程序自定义 Tabbar | Taro 文档 (如果第一次做,请一定要仔细看这个文档

按照文档正常配置app.config.js

app.config.js

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

配置tab页面usingComponents

page/home/index.config.js

export default {
  navigationBarTitleText: '教材',
  usingComponents: {},
}

page/cart/index.config.js

export default {
  navigationBarTitleText: '购物车',
  usingComponents: {},
}

 开发 custom-tab-bar

设置 custom-tab-bar 组件

"component": true 

 Demo

import { Component, useState } from 'react';
import { CoverImage, CoverView } from '@tarojs/components'
import clx from 'classnames'
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import ic_book from '@/static/images/ic_book@2x.png';
import ic_car from '@/static/images/ic_car@2x.png';
import ic_bookHover from '@/static/images/ic_book_hover@2x.png';
import ic_carHover from '@/static/images/ic_car_hover@2x.png';
import './index.scss';
function CustomTabBar() {
  const [tab, setTab] = useState({
    color: '#000000',
    selectedColor: '#DC143C',
    list: [
      {
        pagePath: '/pages/home/index',
        text: '教材',
        iconPath: ic_book,
        selectedIconPath: ic_bookHover
      },
      {
        pagePath: '/pages/shopping-cart/index',
        text: '购物车',
        iconPath: ic_car,
        selectedIconPath: ic_carHover
      }
    ]
  });
  function switchTab(index, url) {
    nx.$patch('app/setTabIndex', index);
    Taro.switchTab({ url });
  }

  return (
    <CoverView
      className="tab-bar"
      style={{ height: nx.$get('app.tabHeight') + 'px' }}>
      <CoverView className="tab-bar-border"></CoverView>
      {tab.list.map((item, index) => {
        return (
          <CoverView
            key={index}
            className="tab-bar-item"
            onClick={() => switchTab(index, item.pagePath)}>
            <CoverView className="ra">
              <CoverImage
                className="cover-image"
                src={
                  nx.$use('app.tabIndex') === index
                    ? item.selectedIconPath
                    : item.iconPath
                }
              />
              {index === 1 && (
                <CoverView className={clx('null-dot', {
                  'dot': nx.$use('cart.count'),
                })}>{nx.$use('cart.count')}</CoverView>
              )}
            </CoverView>

            <CoverView
              className="cover-view"
              style={{
                color:
                  nx.$use('app.tabIndex') === index
                    ? tab.selectedColor
                    : tab.color
              }}>
              {item.text}
            </CoverView>
          </CoverView>
        );
      })}
    </CoverView>
  );
}
export default CustomTabBar;

注意点:

  1. 上述代码中出现的nx是我同事基于Redux Toolkit 封装的一个语法糖,你可以忽略,直接理解为你自己全局状态的使用

修复自定义tab点击卡顿、闪烁

请在每个tab页面中调用如下代码,更新tab

home

 const page = useMemo(() => Taro.getCurrentInstance().page, []);

 useDidShow(() => {const tabbar = Taro.getTabBar<any>(page);

 tabbar?.setSelected(0); 
 });

 

cart

 const page = useMemo(() => Taro.getCurrentInstance().page, []);

 useDidShow(() => {const tabbar = Taro.getTabBar<any>(page);

 tabbar?.setSelected(1); 
 });

 

以上就是我自定义tab的大致过程,详细细节还需要你自己去看文档,官方有相关示例,只要有耐心,你一定可以做的更好

已下是Taro官方的示例 

react: 

https://github.com/NervJS/taro/tree/main/examples/custom-tabbar-react

vue 

https://github.com/NervJS/taro/tree/main/examples/custom-tabbar-vue3文章来源地址https://www.toymoban.com/news/detail-841947.html

到了这里,关于小程序Taro框架 自定义底部Tabbar,处理自定义Tab栏切换卡顿、闪烁的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序自定义 底部 tabbar (中间凸起)

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

    2024年02月20日
    浏览(48)
  • 小程序自定义底部导航 custom-tab-bar

    前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航;或者导航样式需要个性化设计。此时就需要用到自定义底部导航 custom-tab-bar。 1、根目录下创建custom-tab-bar目录 2、在app.json文件中配置导航信息 3、custom-tab-bar/index.wxml 文件内容 4、custom-tab-bar/ind

    2024年02月11日
    浏览(35)
  • 微信小程序自定义底部菜单设计,固定在底部,并非使用tabBar设计

    1.微信小程序自定义底部菜单设计,并且固定在底部,并非tabBar设计 场景:比如加载详情页时:底部需要加入购物车、收藏、返回主页等设计 效果图: 点击事件发生 xx.wxml 样式设计xx.wxss js设计xx.js

    2024年02月16日
    浏览(46)
  • Taro + vue3 + js + nutUI 框架中自定义tabbar的组件封装以及页面跳转的逻辑

    1.需求:   在H5 中需要封装一个自定义的tabbar 菜单跳转 通过nut-ui 进行二次封装 2. 注意点   H5 中原生的tabbar 在ios 中会出现问题 所以进行 封装tabbar 3. 代码操作 首先全部的代码  4.解析 tabList: 菜单的内容数组  根据自己菜单的数量 来决定 const tabList = reactivemenu[]([     {    

    2024年04月17日
    浏览(47)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(52)
  • 详细介绍uniapp小程序自定义底部tabbar样式的方法

    uniapp自带的tabbar组件可以方便地实现底部导航栏的功能,原生tabBar是相对固定的配置方式,但是默认的样式可能无法满足我们的需求,所以我们需要自定义设置tabbar样式。下面我会详细介绍uniapp自定义tabbar样式的方法。 一、pages.json代码 pages.json这里只配置页面路径就可以。

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

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

    2024年02月02日
    浏览(48)
  • 微信程序 自定义遮罩层遮不住底部tabbar解决

    一、先上效果 二 方法 1、自定义底部tabbar 实现: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄 简单写下:在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动 代码: js部分 json wxml wxss 2、 list 的中的页面 都需要在 onShow 中加入

    2024年02月12日
    浏览(50)
  • 前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP

    前端Vue组件化开发:自定义tabbar组件的设计与实现  兼容苹果刘海屏小程序和APP 摘要: 随着前端开发技术的不断发展,组件化开发成为了提高开发效率和降低维护成本的有效手段。本文将介绍一款基于Vue的前端自定义tabbar组件的设计与实现,该组件具有单独开发、单独维护

    2024年02月11日
    浏览(60)
  • 小程序自定义底部导航 custom-tab-bar完整实现代码附效果图

    根据用户身份,动态设置底部的导航图标  实现步骤: 第一步 ,先配置:app.json里面的 tabBar 的 custom 设置为 true,如图:这里需要注意的是,自定义 tabBar 中包含的页面,在这里的 list 页面路径也必须得有,其它字段可以不设置 相关代码:   第二步 ,创建组件:在项目跟目

    2024年02月15日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包