前端
搜索页面(@/views/SeachView)
1、VantUI中找组件
顶上标题
1
2
3
4
5
6
7
8
<van-nav-bar
title="标题"
left-text="返回"
right-text="按钮"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
1
2
3
4
5
6
7
8
9
10
11
12
import { Toast } from 'vant';
export default {
methods: {
onClickLeft() {
Toast('返回');
},
onClickRight() {
Toast('按钮');
},
},
};
搜索框（需要实现双向绑定）
1
2
3
4
5
6
7
8
9
10
11
<van-search
v-model="value"
show-action
label="地址"
placeholder="请输入搜索关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
分页
1
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
2、模板
1
2
3
4
5
6
<template>
<!-- 搜索页面 -->
<div calss="page-search">
...
</div>
</template>
标题
1
2
3
4
<!-- 标题 -->
<van-nav-bar
title="搜索景点"
/>
搜索框
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 搜索框 -->
<van-search
v-model="sightName"
show-action
label="景点"
placeholder="请输入搜索关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
数据双向绑定和事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
export default {
data () {
return {
sightName: ''
}
},
methods: {
onSearch () {
console.log('onSearch')
}
}
}
</script>
景点列表（复用）
1
2
3
4
5
6
<!-- 景点列表 -->
<div class="sight-list">
<sight-item v-for="item in dataList"
:key="item.id"
:item="item"/>
</div>
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
// 景点列表的每一项
import SightItem from '@/components/common/ListSight'
export default {
data () {
return {
// 景点名称
sightName: '',
// 景点列表的数据
dataList: []
}
},
components: {
SightItem
},
...
</script>
分页
1
2
3
4
<!-- 分页 -->
<van-pagination v-model="currentPage"
:total-items="totalItems"
:items-per-page="perPage" />
双向绑定当前页数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
...
export default {
data () {
return {
...
// 当前页面号
currentPage: 1,
// 总页面数
totalItems: 0,
// 一个页面展示的页码数
perPage: 5
}
},
...
</script>
页脚（复用）
1
2
<!-- 页脚 -->
<footer-bar/>
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
<script>
...
// 页脚
import FooterBar from '@/components/common/FooterBar'
export default {
...
components: {
...
FooterBar
},
...
</script>
3、添加路由（@/router/index）
引入页面
1
import SearchView from '../views/SearchView.vue'
编辑路由
1
2
3
4
5
6
7
8
const routes = [
...
{
path: '/search',
name: 'search',
component: SearchView
}
]
实现页脚的跳转(@/components/common/FooterBar)
1
2
3
4
5
6
7
8
<template>
<!-- 底部导航栏（公共组件） -->
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="wap-home-o" :to="{name: 'home'}">首页</van-tabbar-item>
<van-tabbar-item name="search" icon="search" :to="{name: 'search'}">搜索</van-tabbar-item>
<van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</template>