uniapp自定义搜索组件实现全部功能

详情点击链接查看
如下代码只做记录没讲解
首先在项目的components文件夹的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-ui的组件 --><icon type="search" size="17"></icon><text class="placeholder">搜索</text></view></view>
</template><script>export default {name:"my-search",data() {return {};},props: {// 背景颜色bgcolor: {type: String,default: '#C00000'},// 圆角尺寸radius: {type: Number,// 单位是 pxdefault: 18}},methods: {// 点击了模拟的 input 输入框searchBoxHandler() {// 触发外界通过 @click 绑定的 click 事件处理函数this.$emit('click')}}}
</script><style lang="scss">
.my-search-container {// background-color: #c00000;height: 50px;padding: 0 10px;display: flex;align-items: center;
}.my-search-box {height: 36px;background-color: #ffffff;// border-radius: 15px;width: 100%;display: flex;align-items: center;justify-content: center;.placeholder {font-size: 15px;margin-left: 5px;}
}
</style>

效果展示

在pages文件夹中的使用者文件中

<template><view><!-- 使用自定义的搜索组件 --><view class="search-box" ><!-- 动态传入背景颜色值与圆角值   --><mySearch @click="gotoSearch" :bgcolor="'#c00000'" :radius="15"></mySearch></view><view class="scroll-view-container"><!-- 左侧的滚动视图区域 --><scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"><block v-for="(item, i) in cateList" :key="i"><view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">{{item.cat_name}}</view></block></scroll-view><!-- 右侧的滚动视图区域 --><!-- 右侧的滚动视图区域 --><scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop"><view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2"><view class="cate-lv2-title">/ {{item2.cat_name}} /</view><!-- 动态渲染三级分类的列表数据 --><view class="cate-lv3-list"><!-- 三级分类 Item 项 --><view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3"  @click="gotoGoodsList(item3)"><!-- 图片 --><image :src="item3.cat_icon" mode=""></image><!-- 文本 --><text>{{item3.cat_name}}</text></view></view></view></scroll-view></view></view>
</template><script>import mySearch from "@/components/my-search/my-search.vue"export default {components:{mySearch},data() {return {// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度wh: 0,// 分类数据列表cateList: [],// 当前选中项的索引，默认让第一项被选中active: 0,// 二级分类列表cateLevel2: [],// 滚动条距离顶部的距离scrollTop: 0};},onLoad() {// 获取当前系统的信息const sysInfo = uni.getSystemInfoSync()// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度this.wh = sysInfo.windowHeight - 50// 调用获取分类列表数据的方法this.getCateList()},methods: {async getCateList() {// 发起请求const { data: res } = await uni.$http.get('/api/public/v1/categories')// 判断是否获取失败if (res.meta.status !== 200) return uni.$showMsg()// 转存数据this.cateList = res.message// 为二级分类赋值this.cateLevel2 = res.message[0].childrenconsole.log(this.cateList)},// 选中项改变的事件处理函数activeChanged(i) {this.active = i// 为二级分类列表重新赋值this.cateLevel2 = this.cateList[i].childrenconsole.log(this.cateLevel2)// 让 scrollTop 的值在 0 与 1 之间切换this.scrollTop = this.scrollTop?0 :1} ,// 点击三级分类项跳转到商品列表页面gotoGoodsList(item3) {uni.navigateTo({url: '/subpkg/pages/goods_list/goods_list?cid=' + item3.cat_id})},// 跳转到分包中的搜索页面gotoSearch() {uni.navigateTo({url: '/subpkg/pages/search/search'})}}}
</script><style lang="scss">
.scroll-view-container {display: flex;.left-scroll-view {width: 120px;.left-scroll-view-item {line-height: 60px;background-color: #f7f7f7;text-align: center;font-size: 12px;// 激活项的样式&.active {background-color: #ffffff;position: relative;// 渲染激活项左侧的红色指示边线&::before {content: ' ';display: block;width: 3px;height: 30px;background-color: #c00000;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}}}}.cate-lv2-title {font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;}.cate-lv3-list {display: flex;flex-wrap: wrap;.cate-lv3-item {width: 33.33%;margin-bottom: 10px;display: flex;flex-direction: column;align-items: center;image {width: 60px;height: 60px;}text {font-size: 12px;}}}
}
</style>

效果

点击搜索跳转到的搜索组件（分包内的search组件）

<template>
<view class=""><view class="search-box"><uni-search-bar :focus="true"  @input="input" 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"  @click="gotoGoodsList(item)"><text style="margin: 10rpx;border: 1rpx solid #999999;">{{item}}</text></uni-tag></view></view>
</view>
</template><script>export default {data() {return {// 延时器的 timerIdtimer: null,// 搜索关键词kw: '',// 搜索结果列表searchResults: [],// 搜索关键词的历史记录historyList: ['a', 'app', 'apple']};},onLoad(){this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')},methods: {input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器，并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值this.kw = econsole.log(this.kw)this.getSearchList()}, 500)},// 根据搜索关键词，搜索商品建议列表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.messageconsole.log(res.message)if(res.message.length==0){console.log(111)uni.showToast({title:"暂无相关内容",icon:"none"})}else{this.saveSearchHistory()}},gotoDetail(goods_id) {uni.navigateTo({// 指定详情页面的 URL 地址，并传递 goods_id 参数url: '/subpkg/pages/goods_detail/goods_detail?goods_id=' + goods_id})},// 保存搜索关键词为历史记录saveSearchHistory() {const set = new Set(this.historyList)set.delete(this.kw)set.add(this.kw)this.historyList = Array.from(set)// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地uni.setStorageSync('kw', JSON.stringify(this.historyList))},// 清空搜索历史记录cleanHistory() {// 清空 data 中保存的搜索历史this.historyList = []// 清空本地存储中记录的搜索历史uni.setStorageSync('kw', '[]')},// 点击跳转到商品列表页面gotoGoodsList(kw) {uni.navigateTo({url: '/subpkg/pages/goods_list/goods_list?query=' + kw})}},computed: {historys() {// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序// 而是应该新建一个内存无关的数组，再进行 reverse 反转return [...this.historyList].reverse()}}}
</script><style lang="scss">
.search-box {position: sticky;top: 0;z-index: 999;background: #c00000;padding: 10rpx;align-items: center;input{height: 36px;background-color: #ffffff;border-radius: 15px;width: 100%;display: flex;align-items: center;justify-content: center;.placeholder {font-size: 15px;margin-left: 5px;}}
}
.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 5px;.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;.uni-tag {margin-top: 5px;margin-right: 5px;}}
}
</style>

效果

uniapp自定义搜索组件实现全部功能相关推荐

【小程序项目开发-- 京东商城】uni-app之自定义搜索组件（中）-- 搜索建议
uniapp自定义日历组件
1. 支持左右滑动切换月份 Github地址 Props: 属性名说明类型默认值可选值 weekStartDay 周开始时间 Number 1 0:周天/1:周一/2:周二-类推 header ...
微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网 ...
跨平台应用开发进阶(七) ：uni-app 自定义 showToast
文章目录一.前言二.实现原理三.代码实现四.拓展阅读一.前言利用uni-app跨平台开发框架开发多终端APP时,应用HBuilder自身提供的弹窗不满足业务需求,故开发自定义弹窗组件sho ...
uni-app 使用 Uview2.x 搭建自定义tabbar组件
先看效果引言我的软件需要后续隐藏导航栏等功能,在开发过程中逐渐意识到uni-app原生的tabbar可能不能满足个人的开发要求,而且uView的兼容性是所有非原生组件库中最好的,所以我以uView ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
uniapp “未检测到手机或模拟器，请稍后重试”和uniapp自定义组件与通信
错误九:"未检测到手机或模拟器,请稍后重试" 在使用HBuilderX创建uni-app项目的时候想要在手机上运行看看效果,当你点击运行下面的"运行到手机或模拟器(N)& ...
闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录相关组件介绍一机票首页布局二封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
前端vue uni-app自定义精美海报生成组件
在当前技术飞速发展的时代,软件开发的复杂度也在不断提高.传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况.为了解决这个问 ...

uniapp自定义搜索组件实现全部功能

uniapp自定义搜索组件实现全部功能相关推荐

最新文章

热门文章