路由与 Tabbar
在 src/components/thread 组件中,我们通过
Taro.navigateTo({ url: '/pages/thread_detail/thread_detail' })
跳转到帖子详情,但这个页面仍未实现,现在我们去入口文件配置一个新的页面:
src/app.config.js
export default {
pages: ['pages/index/index', 'pages/thread_detail/thread_detail'],
}
然后在路径 src/pages/thread_detail/thread_detail 实现帖子详情页面,路由就可以跳转,我们整个流程就跑起来了:
React
Vue
src/pages/thread_detail/thread_detail.vue
<template>
<view class="detail">
<thread
:node="topic.node"
:title="topic.title"
:last_modified="topic.last_modified"
:replies="topic.replies"
:tid="topic.id"
:member="topic.member"
:not_navi="true"
/>
<loading v-if="loading" />
<view v-else>
<view class="main-content">
<rich-text :nodes="content | html" />
</view>
<view class="replies">
<view v-for="(reply, index) in replies" class="reply" :key="reply.id">
<image :src="reply.member.avatar_large" class="avatar" />
<view class="main">
<view class="author"> {{reply.member.username}} </view>
<view class="time"> {{reply.last_modified | time}} </view>
<rich-text :nodes="reply.content_rendered | html" class="content" />
<view class="floor"> {{index + 1}} 楼 </view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Vue from 'vue'
import Taro from '@tarojs/taro'
import api from '../../utils/api'
import { timeagoInst, GlobalState, IThreadProps, prettyHTML } from '../../utils'
import Thread from '../../components/thread.vue'
import Loading from '../../components/loading.vue'
import './index.css'
export default {
components: {
loading: Loading,
thread: Thread,
},
data() {
return {
topic: GlobalState.thread,
loading: true,
replies: [],
content: '',
}
},
async created() {
try {
const id = GlobalState.thread.tid
const [
{ data },
{
data: [{ content_rendered }],
},
] = await Promise.all([
Taro.request({
url: api.getReplies({
topic_id: id,
}),
}),
Taro.request({
url: api.getTopics({
id,
}),
}),
])
this.loading = false
this.replies = data
this.content = content_rendered
} catch (error) {
Taro.showToast({
title: '载入远程数据错误',
})
}
},
filters: {
time(val) {
return timeagoInst.format(val * 1000)
},
html(val) {
return prettyHTML(val)
},
},
}
</script>
到目前为止,我们已经实现了这个应用的所有逻辑,除去「节点列表」页面(在进阶指南我们会讨论这个页面组件)之外,剩下的页面都可以通过我们已经讲解过的组件或页面快速抽象完成。按照我们的计划,这个应用会有五个页面,分别是:
首页,展示最新帖子(已完成)
节点列表
热门帖子(可通过组件复用)
节点帖子 (可通过组件复用)
帖子详情 (已完成)
其中前三个页面我们可以把它们规划在 tabBar 里,tabBar 是 Taro 内置的导航栏,可以在 app.config.js 配置,配置完成之后处于的 tabBar 位置的页面会显示一个导航栏。最终我们的 app.config.js 会是这样:
app.config.js
xport default {
pages: [
'pages/index/index',
'pages/nodes/nodes',
'pages/hot/hot',
'pages/node_detail/node_detail',
'pages/thread_detail/thread_detail',
],
tabBar: {
list: [
{
iconPath: 'resource/latest.png',
selectedIconPath: 'resource/lastest_on.png',
pagePath: 'pages/index/index',
text: '最新',
},
{
iconPath: 'resource/hotest.png',
selectedIconPath: 'resource/hotest_on.png',
pagePath: 'pages/hot/hot',
text: '热门',
},
{
iconPath: 'resource/node.png',
selectedIconPath: 'resource/node_on.png',
pagePath: 'pages/nodes/nodes',
text: '节点',
},
],
color: '#000',
selectedColor: '#56abe4',
backgroundColor: '#fff',
borderStyle: 'white',
},
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'V2EX',
navigationBarTextStyle: 'black',
},
}