taro 创建 Tabbar
1.代码
src/app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 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.效果图
标签:
taro
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列:使用Catalyst进行自然语言处理
· dotnet 源代码生成器分析器入门
· 官方的 MCP C# SDK:csharp-sdk
· 一款 .NET 开源、功能强大的远程连接管理工具,支持 RDP、VNC、SSH 等多种主流协议!
· 一文搞懂MCP协议与Function Call的区别
· 一次Java后端服务间歇性响应慢的问题排查记录
2017-10-30 gulp在ionic中的使用