4.配置页面 - 搜索
(1).创建search分支
运行如下的命令，基于master分支在本地创建search子分子，用来开发搜索相关的功能。
git checkout -b search
(2).自定义搜索组件
- 自定义my-search组件
1. 在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：
2.在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：
cate.vue
<my-search></my-search>
注意事项:
- Vue: 在Vue中使用组件，我们需要先创建一个组件
component。然后在使用这个组件的地方import引入的操作，然后进行components{}进行注册，然后我们再< xxx> - Uniapp: 创建
components/xxx，直接自动就默认进行了全局的注册，最后我们使用< xxxx>
3.定义 my-search 组件的 UI 结构如下：
<template> <view> <!-- 搜索框 --> <view class="my-search-container"> <view class="my-search-box"> <!-- uniapp提供的图标 type指的是类型、size指的是大小--> <uni-icons type="search" size="17"></uni-icons> <text class="pleacholder">搜索</text> </view> </view> </view> </template> <style lang="scss"> // 搜索框整个view .my-search-container { // 搜索框的高度是 50px height: 50px; background-color: #C00000; // 将搜索框进行居中对其盒子 display: flex; align-items: center; padding: 0 20rpx; // 搜索框里面 .my-search-box { height: 36px; background-color: #FFFFFF; // 圆角 border-radius: 18px; width: 100%; // 文本横向布局、左右居中、垂直居中、 display: flex; justify-content: center; align-items: center; .pleacholder { font-size: 15px; margin-left: 5px; } } } </style>
修改可用屏幕高度解决小bug
this.wh = systemInfo.windowHeight - 50
- 通过自定义属性增强组件的通用性
为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。
1.通过props定义bgclore和rasuis两个属性，并指定值类型和属性默认值
<template> <view> <!-- 搜索框 --> <view class="my-search-container" :style="{'background-color' : bgcolor}"> <view class="my-search-box" :style="{'border-radius' : radius + 'px'}"> <!-- uniapp提供的图标 type指的是类型、size指的是大小--> <uni-icons type="search" size="17"></uni-icons> <text class="pleacholder">搜索</text> </view> </view> </view> </template> <script> export default { name: "my-search", props: { // 背景颜色 bgcolor: { type: String, default: '#C00000' }, //圆角尺寸 radius: { type: Number, default: 18 // 单位是px } }, data() { return { }; } } </script>
重写背景颜色:
- 为自定义组件封装 click 事件 (子传父)
1.在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数：
cate.vue 父组件
<!-- 添加上自定义搜索的组件 --> <my-search :bgcolor="'pink'" @Myclick="gotoSearch()"></my-search> js // 点击搜索页 gotoSearch() { console.log('xxxx') }
my-search.vue 子组件
<template> <view> <!-- 搜索框 --> <view class="my-search-container" :style="{'background-color' : bgcolor}" @click="searchBoxHandler()"> <view class="my-search-box" :style="{'border-radius' : radius + 'px'}"> <!-- uniapp提供的图标 type指的是类型、size指的是大小--> <uni-icons type="search" size="17"></uni-icons> <text class="pleacholder">搜索</text> </view> </view> </view> </template> methods: { searchBoxHandler() { console.log('ssss') // 利用绑定事件 this.$emit('Myclick') } }
