搜索功能（一）-控制搜索页面跳转

搜索功能

第一步：在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>

点击搜索框后，跳转页面