新版HBuilderX在uni_modules创建搜索search组件

  • 1、创建自定义组件 my-search

新版HBuilder没有了 component 文件夹,但是有 uni_modules 文件夹,用来创建组件:

  1. 右键 uni_modules 文件夹,点击 新建uni_modules创建
  2. 在弹出框,填写组件名字,例如:my-search

  • 2、使用该组件

运行到微信开发者工具查看:

 修改 my-search 组件的样式:

<template><view class="my-search-container" :style="{'background-color': bgcolor}"><view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler"><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,// 单位是 pxdefault: 18}},data() {return {}},methods: {// 点击了模拟的 input 输入框searchBoxHandler() {// 触发外界通过 @click 绑定的 click 事件处理函数this.$emit('click')}}}
</script>
<style lang="scss">.my-search-container {// 移除背景颜色,改由 props 属性控制// background-color: #C00000;height: 50px;padding: 0 10px;display: flex;align-items: center;}.my-search-box {height: 36px;background-color: #ffffff;// 移除圆角尺寸,改由 props 属性控制// border-radius: 15px;width: 100%;display: flex;align-items: center;justify-content: center;.placeholder {font-size: 15px;margin-left: 5px;}}
</style>

某个用到 搜索框的页面:

      // 点击搜索跳转 分包gotoSearch() {uni.navigateTo({url: '/subpkg/search/search'})},

 注意:我们上面搜索框,是给用户看的,实际上,不能搜索,我们需要点击跳转到搜索页面

  • 3、新建分包 search 页面

建立一个分包:【名称为 search】

uniapp 配置小程序分包_打不着的大喇叭的博客-CSDN博客

  • 4、使用已有的扩展uni-search-bar组件

网址:uni-app官网 (dcloud.net.cn) 

<template><view><view class="search-box"><!-- 使用 uni-ui 提供的搜索组件 --><uni-search-bar @input="input" placeholder="请输入搜索内容" clearButton="always" focus :radius="100"cancelButton="none"></uni-search-bar></view><!-- 搜索建议列表 --><view class="sugg-list" v-if="searchResults.length !== 0"><view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)"><view class="goods-name">{{item.goods_name}}</view><uni-icons type="arrowright" size="16"></uni-icons></view></view><!-- 搜索历史 --><view class="history-box" v-else><!-- 标题区域 --><view class="history-title"><text>搜索历史</text><uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons></view><!-- 列表区域 --><view class="history-list"><uni-tag :text="item" v-for="(item, i) in historys" :key="i" :inverted="true"@click="gotoGoodsList(item)"></uni-tag></view></view></view>
</template><script>export default {data() {return {// 延时器的 timerIdtimer: null,// 搜索关键词kw: '',// 搜索关键词的历史记录historyList: ['a', 'app', 'apple'],// 搜索结果列表searchResults: []};},onLoad() {this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')},computed: {historys() {// 注意:由于数组是引用类型,所以不要直接基于原数组调用 reverse 方法,以免修改原数组中元素的顺序// 而是应该新建一个内存无关的数组,再进行 reverse 反转return [...this.historyList].reverse()}},methods: {input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器,并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值this.kw = e// 根据关键词,查询搜索建议列表this.getSearchList()}, 500)},// 点击列表跳转到商品列表页面gotoDetail(goods_id) {uni.navigateTo({// 指定详情页面的 URL 地址,并传递 goods_id 参数url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id})},// 点击标签跳转到商品列表页面gotoGoodsList(kw) {uni.navigateTo({url: '/subpkg/goods_list/goods_list?query=' + kw})},// 保存搜索关键词的方法saveSearchHistory() {// 1. 将 Array 数组转化为 Set 对象const set = new Set(this.historyList)// 2. 调用 Set 对象的 delete 方法,移除对应的元素set.delete(this.kw)// 3. 调用 Set 对象的 add 方法,向 Set 中添加元素set.add(this.kw)// 4. 将 Set 对象转化为 Array 数组this.historyList = Array.from(set)// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地uni.setStorageSync('kw', JSON.stringify(this.historyList))},// 清空搜索历史记录cleanHistory() {// 清空 data 中保存的搜索历史this.historyList = []// 清空本地存储中记录的搜索历史uni.setStorageSync('kw', '[]')},// 根据搜索关键词,搜索商品建议列表async getSearchList() {// 判断关键词是否为空if (this.kw === '') {this.searchResults = []return}// 发起请求,获取搜索建议列表const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch', {query: this.kw})if (res.meta.status !== 200) return uni.$showMsg()this.searchResults = res.message// 查询到搜索建议之后,调用 saveSearchHistory() 方法保存搜索关键词this.saveSearchHistory()},}}
</script><style lang="scss">// 设置搜索框的背景颜色.uni-searchbar {background-color: #c00000;}// 设置为吸顶效果.search-box {position: sticky;top: 0;z-index: 999;}// 搜索列表.sugg-list {padding: 0 5px;.sugg-item {font-size: 12px;padding: 13px 0;border-bottom: 1px solid #efefef;display: flex;align-items: center;justify-content: space-between;.goods-name {// 文字不允许换行(单行文本)white-space: nowrap;// 溢出部分隐藏overflow: hidden;// 文本溢出后,使用 ... 代替text-overflow: ellipsis;margin-right: 3px;}}}// 搜索历史.history-box {padding: 0 10px;.history-title {display: flex;justify-content: space-between;align-items: center;height: 40px;font-size: 13px;border-bottom: 1px solid #efefef;}.history-list {display: flex;flex-wrap: wrap;margin-top: 5px;.uni-tag {margin-top: 5px;margin-right: 5px;}}}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60096.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

netmap安装使用

文章目录 1、安装编译netmap2、使用netmap3、运行编写自己的代码 1、安装编译netmap github地址 git clone https://github.com/luigirizzo/netmap 1、进入目录 cd netmap-master/LINUX 2、安装编译环境 apt-get install build-essential 3、初始化配置环境 ./configure 出现这…

【记录】手机QQ和电脑QQ里的emoji种类有什么差异?

版本 手机 QQ&#xff1a;V 8.9.76.12115 电脑 QQ&#xff1a;QQ9.7.15&#xff08;29157&#xff09; 偶然发现&#xff0c;有一种emoji手机上怎么找都找不到&#xff0c;一开始以为自己失忆了&#xff0c;后来发现这种emoji只在电脑上有。 接下来简单说一下找emoji差异的方式…

第 3 章 栈和队列(顺序栈,算法 3.3)

1. 背景说明&#xff1a; 若迷宫 maze 中存在从入口 start 到出口 end 的通道&#xff0c;则求得一条存放在栈中(从栈底到栈顶)&#xff0c;并返回 TRUE&#xff1b;否则返回 FALSE&#xff0c;注意&#xff0c;该解并非最优解&#xff0c; 最优解需要求得最短路径且可能并非…

C#将text文本中的单双行分开单独保存

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 文本的分割1.设定text文件的名称为02.文本导出 文本的分割 1.设定text文件的名称为0 代码如下&#xff1a; using System; using System.Collections.Generic; us…

读SQL学习指南(第3版)笔记06_连接和集合

1. 连接 1.1. 笛卡儿积 1.1.1. 交叉连接&#xff08;cross join&#xff09; 1.1.2. 查询并没有指定两个数据表应该如何连接&#xff0c;数据库服务器就生成了笛卡儿积 1.1.2.1. 两个数据表的所有排列组合 1.1.3. 很少会用到&#xff08;至少不会特意用到&#xff09; 1.…

layui框架学习(43:文件上传模块-下)

上一篇文章介绍文件上传模块使用示例时介绍了done和error事件&#xff0c;这两个事件是在文件上传成功&#xff08;原文&#xff1a;在上传接口请求完毕后触发&#xff0c;但文件不一定是上传成功的&#xff09;及上传失败&#xff08;原文&#xff1a;请求上传出现异常&#x…

深入浅出AXI协议(3)——握手过程

一、前言 在之前的文章中我们快速地浏览了一下AXI4协议中的接口信号&#xff0c;对此我们建议先有一个简单的认知&#xff0c;接下来在使用到的时候我们还会对各种信号进行一个详细的讲解&#xff0c;在这篇文章中我们将讲述AXI协议的握手协议。 二、握手协议概述 在前面的文章…

【运维】hadoop3.0.3集群安装(一)多节点安装

文章目录 一.Purpose二. Prerequisites三. Installation1. 节点规划2. Configuring Hadoop in Non-Secure Mode3. 准备工作4. 配置core-site.xmlhdfs-site.xmlyarn-site.xmlmapred-site.xmlworkers 4. 分发配置、创建文件夹5. 格式化6. 操作进程6.1. hdfs启动停止 6.2. yarn启动…

PyQt6 GUI界面设计和Nuitka包生成exe程序(全笔记)

PyQt6 GUI界面设计和Nuitka包,生成exe程序全笔记 目录一、PyQt6包安装1.1 进行环境配置和安装1.2 检查包是否安装成功。1.3 运行desinger.exe二、GUI界面设计,写程序,并能运行成功。三、Nuitka打包生成exe程序3.1 做Nuitka安装准备工作(1)安装C编译器,设置环境变量3.2 安…

新功能上线!Salesforce Field Service人工智能创新

Salesforce Field Service是Service Cloud的扩展&#xff0c;可提供员工管理的全面视图。Field Service专为进行现场服务的员工而设计&#xff0c;例如服务技术人员、服务座席、调度员等。随着Salesforce平台上线越来越多的生成式AI新增功能&#xff08;包括Sales Cloud、Marke…

浅谈红队资产信息收集经验

文章目录 子公司资产收集备案号|官网收集子域名|ip收集fofa灯塔ARLX情报社区 资产确认目录扫描Google Hacking绕过CDNnmap端口扫描参数技巧其他常用工具 子公司资产收集 红蓝对抗中往往只会给你目标企业的名称&#xff0c;以及对应的靶标系统地址&#xff0c;而很少有直接从靶标…

MySQL基础入门

推荐查看 数据库相关概念 MySQL百度百科 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Databa…

KylinOS配置完静态IP地址后,保存按钮是灰色

问题: 配置完静态IP地址后,保存按钮置灰,并且提示“无效设置IPv4设置:ipv4.gateway:网关与”never-default”不兼容”。 原因: 这是由于禁止添加默认路由导致的。 解决方案: 1、使用nmcli命令: nmcli con modify "有线连接 1" ipv4.never-default no 执…

常见的数据结构之队列

一、介绍 队列(Queue)是一种常见的数据结构,用于存储和管理一系列数据元素,其中元素按照 先进先出(First-In-First-Out,简称FIFO)的原则进行插入和删除。 队列可以类比为现实生活中排队等候的场景,例如在超市收银台排队购物的顾客队列。 二、队列的基本操作 2.1 出…

Java代码审计15之Apache log4j2漏洞

文章目录 1、log4j简介2、复现2.1、高版本测试2.2、测试代码2.3、补充之dns探测2.3.1、rmi、ldap也可以dnslog探测 2.3.2、dnslog外带信息 3、漏洞原理3.1、漏洞的危害大的背景3.2、具体的代码调试 4、靶场测试4.1、dns探测4.2、工具下载与使用4.3、测试 5、bypass 1、log4j简介…

13、监测数据采集物联网应用开发步骤(9.2)

监测数据采集物联网应用开发步骤(9.1) TCP/IP Server开发 新建TCP/IP Server线程类com.zxy.tcp.ServerThread.py #! python3 # -*- coding: utf-8 -Created on 2017年05月10日 author: zxyong 13738196011 import socket,threading,time from com.zxy.tcp.TcpServer import …

CSA研讨会|聚焦云原生安全,探讨技术与应用策略

为产业数字化保驾护航&#xff0c; 云原生安全体系如何有效抵御网络威胁&#xff1f; 网络安全的下一个十年&#xff0c; 云原生安全是网络安全创新之路吗&#xff1f; CNAPP部署现状&#xff0c;你了解多少&#xff1f; 9月6日&#xff08;周三&#xff09;下午14&#xff1a…

推荐一本AI+医疗书:《机器学习和深度学习基础以及医学应用》,附21篇精选综述

当代医学仍然存在许多亟待解决的问题&#xff0c;比如日益增加的成本、医疗服务水平的下降...但近几年AI技术的发展却给医疗领域带来了革命性的变化&#xff0c;因此AI医疗迅速兴起。 从目前已知的成果来看&#xff0c;人工智能在医学领域的应用已经相当广泛&#xff0c;智能诊…