搜索功能(一)-控制搜索页面跳转
搜索功能第一步:在pages文件夹下,新建搜索界面serch文件夹,并在其下新建文件第二步:新建main.js文件,里面内容固定import Vue from 'vue'import App from './index'const app = new Vue(App)app.$mount()第三步:新建index.vue界面文件<template><div>搜索页</
·
搜索功能
第一步:在pages文件夹下,新建搜索界面serch文件夹,并在其下新建文件
第二步:新建main.js文件,里面内容固定
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
第三步:新建index.vue界面文件
<template>
<div>搜索页</div>
</template>
<script>
export default {
data(){
return{ }
}
}
</script>
第四步:在src下的app.json配置路径
{
"pages": [
"pages/search/main"
],
}
第五步:由于新建页面文件,故需重新启动项目
npm run dev
控制搜索页面的跳转
- 基于小程序的路由API实现页面的跳转
在src/components/SearchBar.vue中
handleJump () {
// 控制页面的跳转
wx.navigateTo({
url: '/pages/search/main'
})
}
完整代码
<template>
<div class="search">
<!-- 1.添加点击事件 -->
<div class="search-item" @click='handleJump'>
<icon type='search'/>
<span>搜索</span>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
//2.基于小程序的路由API 实现点击搜索框进行跳转
handleJump () {
// 控制页面的跳转
wx.navigateTo({
url: '/pages/search/main'
})
}
}
}
</script>
<style>
.search {
background-color: #EB4450;
padding: 20rpx;
}
.search-item {
background-color: #fff;
padding: 10rpx;
text-align: center;
color: #888;
}
.search-item icon {
vertical-align: middle;
}
</style>
点击搜索框后,跳转页面
更多推荐
已为社区贡献72条内容
所有评论(0)