一、搭建项目

使用tarojs/cli进行搭建

taro init [项目名]

二、具体页面

页面声明：

在【app.config.ts】中对主页面进行声明：组件页面可以不用声明

pages: ["pages/index/index",'pages/user/index','pages/book/index',],

tabbar制作：

在【app.config.ts】中写入代码：

tabBar: {color: '#333',selectedColor: '#1cbbb4',backgroundColor: '#fff',borderStyle: 'black',list: [{pagePath: 'pages/index/index',text: '首页',iconPath: './assets/tabbar/home.png',selectedIconPath: './assets/tabbar/home_active.png'},{pagePath: 'pages/book/index',text: '书架',iconPath: './assets/tabbar/book.png',selectedIconPath: './assets/tabbar/book_active.png'},{pagePath: 'pages/user/index',text: '我的',iconPath: './assets/tabbar/mine2.png',selectedIconPath: './assets/tabbar/mine2_active.png'},]},
};

【我的】：

页面效果：

【user/index.tsx】页面代码：

import { View, Text, Button, Image } from "@tarojs/components";import './index.less'
import AutorBar from "@/components/AutorBar";
import Line from "@/components/Line";
import TextBar from "@/components/TextBar";const list = [{ title: '我的收藏', icon: require('../../assets/collect.png') },{ title: '借阅记录', icon: require('../../assets/read.png') },{ title: '留言板', icon: require('../../assets/message.png') },
]const User = () => {return (<View className="wrapper"><AutorBar></AutorBar><Line></Line><View className="title"> 最近阅读 </View><Line></Line><View>{list.map((item, index) => <TextBar {...item}></TextBar>)}</View></View>);
};export default User;

【user/index.less】样式文件：

page {background-color: white;padding         : 14px;box-sizing      : border-box;color           : #333;}.wrapper {display       : flex;flex-direction: column;}.title{padding: 20px 0;font-weight: bold;}

【user/index.config.ts】文件

export default {navigationBarTitleText: '图书',enableShareAppMessage: true,};

【书架页面】：

效果如下：

【book/index.tsx】：

import { View, Text, Button, Image } from "@tarojs/components";import './index.less'
import HistoryBar from "@/components/HistoryBar";const bookIndex = require('../../data/detail_400000.json')
const bookList = require('../../data/books_1500000.json')const Book = () => {console.log(bookIndex, 'bookIndex')return (<View className="wrapper"><View className="title"> 热门推荐 </View><HistoryBar bookList={bookList}></HistoryBar></View>);
};export default Book;

【book/index.less】：

page {background-color: white;padding         : 14px;box-sizing      : border-box;color           : #333;background-color: #f6f6f6;
}.wrapper {display       : flex;flex-direction: column;
}.title{padding: 20px 0;font-weight: bold;}

【book/index.config.ts】：

export default {navigationBarTitleText: '图书',enableShareAppMessage: true,};

【主页】效果如下：

【index/index.tsx】

import React, { useCallback } from "react";
import { View, Text, Button, Image } from "@tarojs/components";
import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";import './index.less'
import ComBar from "src/components/ComBar";
import Search from "@/components/Search";const Index = () => {return (<View className="wrapper"><Search></Search><ComBar></ComBar></View>);
};export default Index;

【index/index.less】：

page {background-color: white;padding         : 14px;box-sizing      : border-box;color           : #333;
}.cardList{display: flex;flex-wrap: wrap;}

【Combar】组件

import { ScrollView, View, Image, Text } from "@tarojs/components"import './index.less'const list =[{ title: '精品推荐', icon: require('./images/icon0.png') },{ title: '历史', icon: require('./images/icon1.png')},{ title: '文学', icon: require('./images/icon2.png') },{ title: '艺术', icon: require('./images/icon3.png') },{ title: '人物传记', icon: require('./images/icon4.png') },{ title: '自然科学', icon: require('./images/icon5.png') },{ title: '国外读物', icon: require('./images/icon6.png') }]const ComBar = () => {return (<ScrollView className="combar" scrollX >{list.map(item => <View key={item.title} className="combarItem"><View className="combarItemView"><Image className="combarItemImage" src={item.icon}></Image></View><View className="combarItemText">{item.title}</View></View>)}</ScrollView>)
}export default ComBar

整体效果：