一、搭建项目
使用tarojs/cli进行搭建
taro init [项目名]
二、具体页面
页面声明:
在【app.config.ts】中对主页面进行声明:组件页面可以不用声明
TypeScript
pages: [
"pages/index/index",
'pages/user/index',
'pages/book/index',
],
tabbar制作:
在【app.config.ts】中写入代码:
TypeScript
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】页面代码:
TypeScript
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】样式文件:
css
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】文件
TypeScript
export default {
navigationBarTitleText: '图书',
enableShareAppMessage: true,
};
【书架页面】:
效果如下:
【book/index.tsx】:
TypeScript
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】:
css
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】:
css
export default {
navigationBarTitleText: '图书',
enableShareAppMessage: true,
};
【主页】效果如下:
【index/index.tsx】
TypeScript
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】:
TypeScript
page {
background-color: white;
padding : 14px;
box-sizing : border-box;
color : #333;
}
.cardList{
display: flex;
flex-wrap: wrap;
}
【Combar】组件
TypeScript
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
整体效果: