zoukankan      html  css  js  c++  java
  • taro 创建 Tabbar

    1.代码

    src/app.js

    import '@tarojs/async-await'
    import Taro, { Component } from '@tarojs/taro'
    import Home from './pages/home'
    import dva from './utils/dva'
    import models from './models'
    import { Provider } from '@tarojs/redux'
    
    import './styles/base.scss'
    
    
    const dvaApp = dva.createApp({
      initialState: {},
      models: models,
    });
    const store = dvaApp.getStore();
    
    class App extends Component {
    
      config = {
        pages: [
          'pages/home/index',
          'pages/cart/index',
          'pages/user/index',
        ],
        window: {
          backgroundTextStyle: 'dark',
          navigationBarBackgroundColor: '#fff',
          navigationBarTitleText: '女装租赁平台',
          navigationBarTextStyle: 'black'
        },
        tabBar: {
          list: [{
            pagePath: "pages/home/index",
            text: "首页",
            iconPath: "./images/tab/home.png",
            selectedIconPath: "./images/tab/home-active.png"
          }, {
            pagePath: "pages/cart/index",
            text: "衣袋",
            iconPath: "./images/tab/cart.png",
            selectedIconPath: "./images/tab/cart-active.png"
          },{
            pagePath: "pages/user/index",
            text: "我的",
            iconPath: "./images/tab/user.png",
            selectedIconPath: "./images/tab/user-active.png"
          }],
          color: '#333',
          selectedColor: '#333',
          backgroundColor: '#fff',
          borderStyle: '#ccc'
        }
      }
    
      componentDidMount() {
    
      }
    
      render() {
        return (<Provider store={store}>
          <Home/>
        </Provider>);
      }
    }
    
    Taro.render(<App/>, document.getElementById('app'))

    2.项目目录

    3.效果图

  • 相关阅读:
    poj 3068 Bridge Across Islands
    XidianOJ 1086 Flappy v8
    XidianOJ 1036 分配宝藏
    XidianOJ 1090 爬树的V8
    XidianOJ 1088 AK后的V8
    XidianOJ 1062 Black King Bar
    XidianOJ 1091 看Dota视频的V8
    XidianOJ 1098 突击数论前的xry111
    XidianOJ 1019 自然数的秘密
    XidianOJ 1109 Too Naive
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9880253.html
Copyright © 2011-2022 走看看