使用HBuilder uni-app VUE 创建微信小程序中 自定义搜索组件点击跳转页面

实现搜索框点击跳转

 

创建自定义 my-search UI组件

                 1.在项目根目录的  uni_modules 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：

 my-search 文件中代码 实现搜索框

<template>
  <!-- 搜索模块 -->
  <view class="my-search-container" :style="{ 'background-color' : bgcolor }">
    <!-- 搜索框 -->
    <view class="my-search-boc" :style="{ 'border-radius' : radius + 'px' }">
      <!-- 搜索框内图标  （使用 uni-ui 提供的图标组件） -->
      <uni-icons type="search" size="17"></uni-icons>
      <!-- 搜索框内文本 -->
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    // 声明
    props: {
      // 背景颜色
      bgcolor: {
        type: String,
        default: '#C00000'
      },
      // 圆角尺寸
      radius: {
        type: Number,
        default: 18  // 单位px
      }
    },
    data() {
      return {
        
      }
    }
  }
</script>

<style lang="scss">
  // 搜索模块
  .my-search-container {
    height: 50px;
    // background-color: #C00000;
    display: flex;
    align-items: center;
    padding: 0 10px;
    // 搜索框
    .my-search-boc {
      height: 36px;
      background-color: #ffffff;
      // border-radius: 18px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      // 搜索内文本
      .placeholder {
        font-size: 15px;
        margin-left: 5px;
      }
    }
  }
</style>

在 Cate 分类页面 自定义搜索组件中 创建click点击事件 

<my-search @click="gotoSearch"></my-search>

 在 Cate文件 methods中 定义click点击事件  测试打印  'OK'

// 自定义搜索组件项点击跳转事件
      gotoSearch() {
        console.log('ok')
      }

my-search 文件 在搜索模块中添加click点击事件

<view class="my-search-container" :style="{ 'background-color' : bgcolor }" @click="searchBoxHandler"><view》

 在my-search文件  methods 定义点击事件   使用this.$emit 子传父 实现 Cate文件 定义 自定义搜索组件 click点击事件 打印测试 'OK'

// 搜索模块项点击跳转
      searchBoxHandler() {
        // Cate文件中 自定义搜索组件 向 当前文件 搜索模块 传值 （子向父传值）
        this.$emit('click')
      }

在subpug分包 新建uni-app页面 search 文件 

Cate文件 定义 自定义搜索组件 click点击事件跳转到search页面

 // 自定义搜索组件项点击跳转事件
      gotoSearch() {
        // 点击跳转到search 搜索详情页
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }