热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【小程序项目开发京东商城】uniapp之自定义搜索组件(上)组件UI

???欢迎来到??? ??魔术之家!!??该文章收录专栏 ? 2022微信小程序京东商城实战 ?专栏内容 ? 京东商城uni-app项目搭建 ? ? 京东商城uni-app 配置tabBar & 窗口

在这里插入图片描述

???欢迎来到???
??魔术之家!!??

该文章收录专栏
? 2022微信小程序京东商城实战 ?

专栏内容
? 京东商城uni-app项目搭建 ?
? 京东商城uni-app 配置tabBar & 窗口样式 ?
? 京东商城uni-app开发之分包配置 ?
? 京东商城uni-app开发之轮播图 ?
? 京东商城uni-app之分类导航区域 ?
? 京东商城uni-app 首页楼层商品 ?
? 京东商城uni-app 商品分类页面(上) ?
? 京东商城uni-app 商品分类页面(下) ?
? 京东商城uni-app之自定义搜索组件(上) ?
? 京东商城uni-app之自定义搜索组件(中) ?

文章目录

  • 一、介绍并创建search分支(选读*)
  • 二、自定义搜索组件UI结构
    • 2.1在`component`目录上创建组件
    • 2.2 定义自定义组件的UI结构
    • 2.3 解决一个小bug
  • 三、封装自定义组件属性和click事件
    • 3.1 自定义属性
    • 3.2 click 事件绑定
  • 四、导航跳转和吸顶效果
    • 4.1 导航跳转
    • 4.2 吸顶效果
  • 个人总结(选读*)
一、介绍并创建search分支(选读*)
  • git checkout -b search 注释:创建分支并跳转
二、自定义搜索组件UI结构

2.1在component目录上创建组件

在这里插入图片描述

2.2 定义自定义组件的UI结构

对于搜索图标,uni官方给我们了相应的组件
在这里插入图片描述

这些官方组件都放在了文件uni_modules目录下了,直接使用即可

  • 模板

    搜索
  • 样式

效果:

在这里插入图片描述

2.3 解决一个小bug

在滑动三级分类时,会发现显示的不完整,且此时搜索框是会可以被滑动,这是因为我们在scroll-view滑动组件中设置的高度是手机可用的高度,而此时搜索框组件占用了一部分高度,对应的,底部也会减少一部分高度,所以我们在设置其滑动组件高度时可以减去搜索框对应使用高度
在这里插入图片描述
各个高度如下
在这里插入图片描述

在这里插入图片描述

  • 修改如下(减去50px):

    onLoad() {
    // 调取手机高度数据
    const {
    windowHeight: Hight
    } = uni.getSystemInfoSync()
    this.windowHeight = Hight - 50 // 减去搜索框高度
    // 调取分类数据
    this.getCateList()
    },

在这里插入图片描述成功解决

三、封装自定义组件属性和click事件

3.1 自定义属性

通过自定义属性增强组件的通用性(自定义背景颜色,圆角程度)

  • props节点定义数据(类似在原生小程序中的properties属性,

  • props是父组件与组件之间的通信,而data则是组件的私有数据,无法直接传参

  • 默认值为default属性

    props: {
    // 背景颜色
    bgcolor: {
    type: String,
    default: ‘#ff1e0a’
    },
    // 圆角尺寸
    radius: {
    type: Number,
    default: 100
    }
    },

  • 在组件中动态绑定style,输入键值对




  • 那么在使用该组件时,我们可以对其传参,设置背景颜色和圆角度,如
    注意:在组件传参中,参数由双引号包裹起来·"" 如果参数字符串,那么字符串形式应该为 '字符串',不然报错会难以查找

效果:
在这里插入图片描述

3.2 click 事件绑定

实现点击该组件实现页面跳转到搜索页面,按照我们以往的思路我们自然而然地想为该组件绑定一个处理函数,那么该方法可不可行呢?

  • 我们绑定一个事件处理函数,并在事件触发后打印ok:

    // 搜索框click事件
    gotosearch: () => {
    console.log(‘ok’)
    },

可以看到毫无效果:在这里插入图片描述

  • 原因:

当前为自定义组件绑定了 click事件处理函数,但是自定义组件本身并没有提供click事件,所以绑定无效,
那么为什么在常规组件中 ,如 view 可以呢,这是因为官方已经为这些常规组件封装好了 click事件,所以可以直接绑,而自定义组件并没有封装,所以即使绑定了也无法实现

  • 解决

在自定义组件中,我们可以为最外层组件容器 view 绑定一个click事件(原理:使用官方组件封装的click点击事件判断触发)
在这里插入图片描述
并在该事件绑定函数中使用this.$emit调用父组件绑定函数



······

// 搜索框click事件
searchBoxHander() {
console.log('~~~~~')
this.$emit('click')
},
四、导航跳转和吸顶效果

4.1 导航跳转

  • 创建搜索(search) 页面(在分包中创建)
    在这里插入图片描述

  • 在组件绑定函数gotosearch 跳转到编程时跳转页面

    // 搜索框click事件
    gotosearch(){
    uni.navigateTo({
    url: '/subpackages/search/search'
    })
    },

效果:
在这里插入图片描述

4.2 吸顶效果

  • 吸顶效果:保持顶部,不随滑动消失而消失

在分类页面由于整个 UI结构高度并没有 超出页面(滑动高度 + 搜索框高度 = 可用高度),所以不需要配置吸顶效果,这里配置首页

首页配置

  • UI结构




  • 跳转页面时间处理函数

    // 跳转到自定义导航页面
    gotosearch(){
    uni.navigateTo({
    url:‘/subpackages/search/search’
    })

  • 通过样式实现吸顶效果(重要)

    .search-box {
    position: sticky; // sticky 粘性的
    // 保持顶部
    top: 0;
    // 提高层级,避免被轮播图覆盖
    z-index: 999;
    }

效果:
在这里插入图片描述

个人总结(选读*)

一下只是个人的学习总结拙见,写得不好还请海涵。
由于我是半路出家,只学了一点html,css, 就直接学原生小程序,再到uni-app,所以基础不好,在面对原生小程序中遇到 bindtap,bindchange,这些事件处理函数有点懵,下意识当作一种函数,但实际上直接再组件中使用是官方封装好的,原本模样应该是 bind:tap = “函数名”, 这里的bind 是绑定事件的意思,而事件则是 tap(自定义名字),在官方组件内部已经封装好了事件,所以在后面学 父组件与子组件通信时候,我还在纳闷, bind: sync = ”函数名字“, 为啥说是自定义事件 bind:sync,且在子组件内使用 this.triggerEvent(触发事件),就是触发该组件的事件sync(且可以传参),在uni-app则是以this.emit触发事件。例如click,在官方组件应该是判断是否点击如果点击则调用’this.$emit’触发事件函数

综上要实现对自定义组件绑定click事件,可在自定义组件结构中最外层容器绑定click事件,使用官方封装好的事件处理,然后在click事件所绑定函数中this.$emit调用父组件调用函数
在这里插入图片描述
在这里插入图片描述

?谢谢你的阅读,您的点赞和收藏就是我创造的最大动力!?

推荐阅读
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • python模块之正则
    re模块可以读懂你写的正则表达式根据你写的表达式去执行任务用re去操作正则正则表达式使用一些规则来检测一些字符串是否符合个人要求,从一段字符串中找到符合要求的内容。在 ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 解决Only fullscreen opaque activities can request orientation错误的方法
    本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误,并提供了一种有效的解决方案。 ... [详细]
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • 多线程基础概览
    本文探讨了多线程的起源及其在现代编程中的重要性。线程的引入是为了增强进程的稳定性,确保一个进程的崩溃不会影响其他进程。而进程的存在则是为了保障操作系统的稳定运行,防止单一应用程序的错误导致整个系统的崩溃。线程作为进程的逻辑单元,多个线程共享同一CPU,需要合理调度以避免资源竞争。 ... [详细]
  • 本文对比了杜甫《喜晴》的两种英文翻译版本:a. Pleased with Sunny Weather 和 b. Rejoicing in Clearing Weather。a 版由 alexcwlin 翻译并经 Adam Lam 编辑,b 版则由哈佛大学的宇文所安教授 (Prof. Stephen Owen) 翻译。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
author-avatar
人散心未散1
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有