因为父组件不存在没有@AAA事件的，所以我们需要给父组件自定义触发事件，然后在子组件的位置进行@Click事件。在触发的函数中进行 this.$emit(‘AAA’)即可。
- 导航跳转
在subpkg目录下创建分包
cate.vue
// 点击跳转到搜索页 gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) }
- 实现首页的吸顶效果 (就是搜素狂固定位置不动)
home.vue
<!-- 使用自定义的搜索组件 --> <view class="search-box"> <my-search @click="gotoSearch"></my-search> </view>
home.vue: 跳转的路径
gotoSearch() { uni.navigateTo({ url: '/subpkg/search/search' }) }
home.vue 样式的修改
.search-box { // 设置定位效果为“吸顶” position: sticky; // 吸顶的“位置” top: 0; // 提高层级，防止被轮播图覆盖 z-index: 999; }
(3).搜索建议
- 渲染搜索页面的基本结构
1.渲染基本UI结构
search.vue
<template> <view> <view class="search-box"> <!-- 使用 uni-ui 提供的搜索组件 cancelButton:none 一直不显示取消按钮--> <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar> </view> </view> </template>
2.修改源代码的搜索框的背景色
.uni-searchbar { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; position: relative; padding: 10px; background-color: #C00000; }
3.定义input的事件处理函数
<view class="search-box"> <!-- 使用 uni-ui 提供的搜索组件 1. cancelButton:none 一直不显示取消按钮 2.绑定input事件--> <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar> </view> methods: { // input事件的处理函数 input(e) { console.log('搜索页面search文本框->', e) } }
- 自动获取搜索框的焦点 (
当我们进入这个页面的时候自动锁定搜索框)
在搜索框上使用: focuse节点即可
<template> <view> <view class="search-box"> <!-- 使用 uni-ui 提供的搜索组件 1. cancelButton:none 一直不显示取消按钮 2.绑定input事件--> <uni-search-bar @input="input" :radius="100" cancelButton="none" :focus="true"></uni-search-bar> </view> </view> </template>
