Taro开发微信小程序-TabBar实现(四)

最新推荐文章于 2025-09-11 19:33:58 发布

原创

最新推荐文章于 2025-09-11 19:33:58 发布 · 5.8k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了在Taro中实现微信小程序TabBar的具体步骤，包括四个子页：Fitting, Wardrobe, Circle, Mine的组件创建。在主页面开发过程中，由于Taro不支持在函数外使用JSX，故采用特定方式进行编写。同时，注意到在Taro的componentDidMount和componentDidUpdate方法中处理页面渲染和顶部导航栏的动态加载。" 72842119,480462,RK3288平台Android6.0中regmap的使用与调试,"['嵌入式开发', 'Linux内核', 'I2C', 'SPI', 'MMIO']

TabBar有四个子页：Fitting(试衣间)、Wardrobe(衣橱)、Circle(圈子)、Mine(我的)。
这四个页面存放在src/components/下为四个组件。
在src/pages/main/index.js编写主页。
代码如下：

import Taro, { Component } from '@tarojs/taro'
import { AtTabBar } from 'taro-ui'
import { View } from '@tarojs/components'
import Fitting from './../../components/fitting';
import Wardrobe from './../../components/wardrobe';
import Circle from './../../components/circle';
import Mine from './../../components/mine';
import './index.less';

const tabList = [
        { title: '试衣间', iconType: 'eye' },
        { title: '衣橱', iconType: 'equalizer' },
        { title: '圈子', iconType: 'map-pin', },
        { title: '我的', iconType: 'user', }
]

export default class Main extends Component{

    constructor(props){
        super(props);
        this.state={
            current: 0
        }
        this.handleClick = this.handleClick.bind(this);
    }
    componentDidMount(){
        Taro.setNavigationBarTitle({

最低0.47元/天解锁文章