图书项目要点

一、搭建项目

使用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

整体效果:

相关推荐
软件小伟2 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
2202_7544215411 分钟前
生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件
java·linux·开发语言
醉の虾24 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧32 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
努力的悟空38 分钟前
国土变更调查拓扑错误自动化修复工具的研究
运维·自动化
hummhumm42 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
运维&陈同学1 小时前
【zookeeper03】消息队列与微服务之zookeeper集群部署
linux·微服务·zookeeper·云原生·消息队列·云计算·java-zookeeper
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue