企业官网建设流程全解析

中关村哪里可以做网站,广告优化师是做什么的,中国室内设计网站,怀化政法网站1. Taro实现自定义Tabbar 平时在开发时会遇到一些Tabbar中间有悬浮按钮的需求#xff0c;比如这样 这时候就需要自定义底部Tabbar#xff0c;按照官方文档#xff0c;我们可以这样操作 1.修改app.config配置 tabBar: {selectedColor: themeVars.nutuiColorPrimary,border…1. Taro实现自定义Tabbar平时在开发时会遇到一些Tabbar中间有悬浮按钮的需求比如这样这时候就需要自定义底部Tabbar按照官方文档我们可以这样操作1.修改app.config配置tabBar: { selectedColor: themeVars.nutuiColorPrimary, borderStyle: white, custom: true, list: [ { pagePath: pages/index/index, text: 首页, iconPath: assets/images/home.png, selectedIconPath: assets/images/home-s.png, }, { pagePath: pages/my/my, text: 我的, iconPath: assets/images/user.png, selectedIconPath: assets/images/user-s.png } ] },2.在src新建目录和文件3.然后我们在index.tsx中填入我们的组件内容import { useEffect, useState } from react import { View } from tarojs/components; import { Button, Image } from nutui/nutui-react-taro; import ./index.scss import ThemeProvider from /theme-provider/ThemeProvider; import { themeVars } from /theme-provider/theme.config; import Taro from tarojs/taro; // import { useTabBarStore } from /store; function CustomTabBar() { const [curentIndex, setCurrentIndex] useState(0) // const {selectTab,setSelectTab} useTabBarStore() const list [ { pagePath: /pages/index/index, text: 首页, iconPath: /assets/images/home.png, selectedIconPath: /assets/images/home-s.png, }, { pagePath: /pages/my/my, text: 我的, iconPath: /assets/images/user.png, selectedIconPath: /assets/images/user-s.png } ] return ( ThemeProvider View classNametab-bar View style{{ display: flex, justifyContent: space-around, alignItems: center, width: 100%,paddingTop: 5px }} { list.map((item,index) ( View classNametab-bar-item key{index} onClick{ () { setCurrentIndex(index) Taro.switchTab({ url: item.pagePath }) // 跳转到指定页面 }} Image src{index curentIndex ? item.selectedIconPath : item.iconPath} / View style{{ marginTop: 5, color: index curentIndex ? themeVars.nutuiColorPrimary : #999 }}{item.text}/View /View)) } Button classNamemiddle-btn1/Button /View /View /ThemeProvider ) }这里要注意list从原来的app.config复制过来的需要改些目录比如pagePath在app.config里开头是不需要/但是这里需要这里实现底部Tabbar凹陷形状的思路狠简单粗暴直接拿背景图进行覆盖然后按钮定位上去这里就不细讲。 当完成了基本的Tabbar之后是这样的2. 底部Tabbar切换页面和高亮不同步意思就是说当我点击某个tab时会立即切换页面但是并不高亮只有我再次点击这个tab才会高亮如图这个问题其实是因为我们的切换页面后状态会重新执行这个地方用全局状态就可以解决我这里之前用了zustand所以这里还是只用zustand进行全局状态管理1.新建useTabBarStore.ts文件填入如下代码import { create } from zustand; interface IuseTabBarStore { selectTab: number; setSelectTab: (selectTab: number) void; } const useTabBarStore createIuseTabBarStore((set) ({ selectTab: 0, setSelectTab: (selectTab: number) set({ selectTab }), })) export default useTabBarStore;2.然后就完美解决了import { useEffect, useState } from react import { View , Image} from tarojs/components; import { Button } from nutui/nutui-react-taro; import ./index.scss import ThemeProvider from /theme-provider/ThemeProvider; import { themeVars } from /theme-provider/theme.config; import Taro from tarojs/taro; import { useTabBarStore } from /store; function CustomTabBar() { const {selectTab,setSelectTab} useTabBarStore() const list [ { pagePath: /pages/index/index, text: 首页, iconPath: /assets/images/home.png, selectedIconPath: /assets/images/home-s.png, }, { pagePath: /pages/my/my, text: 我的, iconPath: /assets/images/user.png, selectedIconPath: /assets/images/user-s.png } ] return ( ThemeProvider View classNametab-bar View style{{ display: flex, justifyContent: space-around, alignItems: center, width: 100%,paddingTop: 5px }} { list.map((item,index) ( View classNametab-bar-item key{index} onClick{ () { setSelectTab(index) Taro.switchTab({ url: item.pagePath }) // 跳转到指定页面 }} Image src{index selectTab ? item.selectedIconPath : item.iconPath} style{{ width: 24, height: 24 }}/ View style{{ marginTop: 5, color: index selectTab ? themeVars.nutuiColorPrimary : #999 }}{item.text}/View /View)) } Button classNamemiddle-btn1/Button /View /View /ThemeProvider ) } export default CustomTabBar本文章是转载文章以下是作者作者零道链接https://juejin.cn/post/7418793629597302834来源稀土掘金著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。