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

最终效果

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

起步

 这页是我第一次接触自定义小程序底部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 (<CoverViewclassName="tab-bar"style={{ height: nx.$get('app.tabHeight') + 'px' }}><CoverView className="tab-bar-border"></CoverView>{tab.list.map((item, index) => {return (<CoverViewkey={index}className="tab-bar-item"onClick={() => switchTab(index, item.pagePath)}><CoverView className="ra"><CoverImageclassName="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><CoverViewclassName="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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上海亚商投顾:沪指震荡微涨 AI手机、军工板块集体走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日低开后震荡回升&#xff0c;黄白二线分化明显&#xff0c;银行等权重板块走势较强。AI手机概念股持续…

Kernel - 内核同libc的关系

内核空间中有 libc 吗&#xff1f;我的意思是&#xff0c;你必须根据某个 libc 来构建内核&#xff0c;对吗&#xff1f;那么内核空间中是否有一个 libc&#xff08;可能是静态链接的&#xff09;&#xff1f; 如果有&#xff0c;这与用户态的 glibc 有什么关系&#xff1f; 它…

欧科云链:角力Web3.0,香港如何为合规设线?

在香港拥抱Web3.0的过程中,以欧科云链为代表的合规科技企业将凸显更大重要性。 ——据香港商报网报道 据香港明报、商报等媒体报道&#xff0c;港区全国政协兼香港选委界立法会议员吴杰庄在日前召开的全国两会上提出在大湾区建设国际中小企业创新Web3融资平台等提案&#xff0…

Android SDK2 (实操三个小目标)

书接上回&#xff1a;Android SDK 1&#xff08;概览&#xff09;-CSDN博客 今天讲讲三个实际练手内容&#xff0c;用的是瑞星微的sdk。 1 实操编译Android.bp 首先还是感叹下&#xff0c;现在的系统真的越搞越复杂&#xff0c;最早只有gcc&#xff0c;后面多了make&#xf…

Flink StreamGraph生成过程

文章目录 概要SteramGraph 核心对象SteramGraph 生成过程 概要 在 Flink 中&#xff0c;StreamGraph 是数据流的逻辑表示&#xff0c;它描述了如何在 Flink 作业中执行数据流转换。StreamGraph 是 Flink 运行时生成执行计划的基础。 使用DataStream API开发的应用程序&#x…

Netty权威指南——基础篇4 网络通信基础 备份

1 TCP粘包/拆包 TCP是个“流”协议&#xff0c;所谓流&#xff0c;就是没有界限的一串数字。可以想象河里流水&#xff0c;是连成一片的&#xff0c;其间没有分界线。TCP底层并不了解上层业务数据的具体含义&#xff0c;它会根据TCP缓冲区的实际情况进行包的划分&#xff0c;一…

OpenHarmony教程指南—Navigation开发 页面切换场景范例

简介 在应用开发时&#xff0c;我们常常遇到&#xff0c;需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理&#xff0c;它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载&#xff0c;navPathSta…

【算法笔记】LeetCode_3 无重复字符的最长字串

LeetCode_3 无重复字符的最长字串 LeetCode_3 无重复字符的最长字串 题目要求 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 ** **的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为…

onlyoffice监听https

修改onlyoffice 在开始将您的ONLYOFFICE Docs切换到HTTPS协议之前&#xff0c;您需要创建一个安全证书和证书私钥。将它们放到安装ONLYOFFICE Docs的计算机上的一个文件夹中。 获得证书后&#xff0c;请执行以下步骤&#xff1a; 所有命令都应以管理员权限执行。要以管理员身份…

Redis中的整数集合数据结构为什么不支持降级操作?

Redis 的整数集合&#xff08;intset&#xff09;数据结构是用来存储整数值的集合&#xff0c;它可以存储 16、32 或 64 位的整数值&#xff0c;并且会根据存储的整数的大小自动调整内部存储的位数&#xff0c;以节省空间。例如&#xff0c;如果一个整数集合当前只包含 16 位的…

【PICO 4教程】Unity3D中实现对PICO 4的手柄按键响应

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群:398291828大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 最近在搞PICO 4开发,尝试了几种PICO 4的手柄按钮响应方法,这篇文章就总结一下几种按钮响应…

递推与递归DFS

&#xff1b;例题引入&#xff1a; 在跳楼梯问题中&#xff0c;我们假设每次可以跳1级或2级。如果我们想跳到第N级台阶&#xff0c;那么我们的最后一次跳跃只能是1级或2级。 如果我们最后一次跳1级&#xff0c;那么我们必须先跳到第N-1级台阶。由于跳到第N-1级台阶有f(N-1)种方…

【React】react的生命周期

react的生命周期 一、新生命周期1、挂载阶段1.1 constructor&#xff08;1&#xff09;在React组件挂载之前被调用&#xff08;2&#xff09; 初始化函数内部 state或者在this上挂载方法 1.2 getDerivedStateFromProps&#xff08;1&#xff09;为静态方法&#xff0c;不能访问…

快速了解Redis

Redis是什么&#xff1f; Redis是一个数据库&#xff0c;是一个跨平台的非关系型数据库&#xff0c;Redis完全开源&#xff0c;遵守BSD协议。它通过键值对(Key-Value)的形式存储数据。 它与mysql数据库有什么区别&#xff1f; redis通过键值对(Key-Value)的形式存储数据&…

springboot源码解析之Model和Map参数解析

springboot源码解析之Model和Map参数解析 标签:源码:springboot 测试代码 Controller public class HelloController {RequestMapping("/helloModelAndMap")public String helloModelAndMap(HttpServletRequest request, Model model, Map<String, Object> …

万物皆可Find My,伦茨科技ST17H6x芯片赋能产品苹果Find My功能

苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、Ai…

[ISP]DCT离散余弦变换及C++代码demo

1.基本定义 离散余弦变换(DCT for Discrete Cosine Transform) DCT&#xff08;Discrete Cosine Transform&#xff0c;离散余弦变换&#xff09;是一种常用的信号处理技术&#xff0c;广泛应用于图像处理、音频处理、视频压缩等领域。DCT将一个信号或数据序列从时域&#xf…

TensorFlow 与pytorch

TensorFlow 与pytorch 介绍 TensorFlow 的基本概念和使用场景python 搭建 tensorflow 介绍 pytorch 的基本概念和使用场景PyTorch中搭建模型 TensorFlow与pytorchTensorFlow与pytorch的区别TensorFlow与pytorch的联系TensorFlow与pytorch各自的开发团队TensorFlow与pytorch之外…

【Tauri】(5):本地运行candle和 qwen 大模型,并测试速度

1&#xff0c;本地运行candle 关于candle项目 https://github.com/huggingface/candle Hugging Face 使用rust开发的高性能推理框架。 语法简单&#xff0c; 风格与 PyTorch 相似。 CPU 和 Cuda Backend&#xff1a;m1、f16、bf16。 支持 Serverless&#xff08;CPU&#xff…

Angular变化检测 2.0版本学习

在学习如何在Angular中实现文字逐字显示的过程中&#xff0c;我发现要保证用户的体验感的关键点在于&#xff1a;如何确保实时更新.html页面的内容显示&#xff0c;保证及时在UI界面反应出后端返回的数据? 那如何解决这个问题呢&#xff1f;其实我在博客中有提到过这个问题的…