前端仿京东、天猫带搜索历史搜索栏搜索框searchBar
快速实现前端仿京东、天猫带搜索历史搜索栏搜索框searchBar, 使用简单便利, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12529
效果图如下
代码如下:
<template>
<view class="content">
<view style="margin-top: 16px;">
<!-- keyStr: 设置存储key hisClick: 设置历史事件 searchClick:设置搜索事件 -->
<CCSearchHisView keyStr="productHisArr" searchPlaceHolder="请输入产品名称、关键字" @hisClick="selHisClick"
@searchClick="goSearchClick"></CCSearchHisView>
</view>
</view>
</template>
<script>
import CCSearchHisView from '@/components/CCSearchHisView.vue';
export default {
components: {
CCSearchHisView
},
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
selHisClick(item) {
console.log('选择的值 = ' + item);
uni.navigateTo({
url: '/pages/index/search?name=' + item
})
},
goSearchClick(item) {
uni.navigateTo({
url: '/pages/index/search?name=' + item
})
},
}
}
</script>
<style scoped>
page {
}
.content {
display: flex;
flex-direction: column;
height: 100vh;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
前端仿京东、天猫带搜索历史搜索栏搜索框searchBar的更多相关文章
- 17 Flutter仿京东商城项目 保存历史搜索记录 删除历史记录 清空历史记录 长按删除
Storage.dart import 'package:shared_preferences/shared_preferences.dart'; class Storage{ static Futu ...
- 16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 前端实现搜索历史和清空历史(angularjs+ionic)
要实现的页面效果: 1.显示历史搜索, 2.最近搜索的排在最前, 2.最多显示8条历史 4.清空历史记录 思路: 1.首先显示历史记录需要一个数组searchItems,通过ng-repeat显示每一 ...
- React-Native牛刀小试仿京东砍啊砍砍到你手软
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...
- 仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...
- odoo之带出历史订单产品
这是在sale_origin中下由两张单子{sale_origin_line和history_order} class history_order(osv.osv): _name="hist ...
- 浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时
今天给大家带来的是只使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.近期公司一直加班也没来得及时间去整理,今天难得歇息想把这个分享给大家.只求共同学习,以及自己兴许 ...
- ThinkPHP3.2开发仿京东商城项目实战视频教程
ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...
随机推荐
- solidity中的mapping
mapping可以理解为python中对字典的键值遍历,键是唯一的而值是可以重复的 mapping函数的构造: mapping(_KeyType => _ValueType) mapping ...
- python类详解
类封装 继承 多态一静态属性1.静态变量和静态方法都属于类的静态成员,它们与普通的成员变量和成员方法不同,静态变量和静态方法只属于定义它们的类,而不属于某一个对象.2.静态变量和静态方法都可以通过类名 ...
- python之sys库
sys --- 系统相关的参数和函数 该模块提供了一些变量和函数.这些变量可能被解释器使用,也可能由解释器提供.这些函数会影响解释器.本模块总是可用的. sys.abiflags 在POSIX系统上, ...
- [Java SE]JDK版本特性解读:@PostStruct[JDK1.6-JDK1.8]
1 @PostStruct 1.1 概述 定义及用途 @PostConstruct(javax.annotation.PostConstruct)注解好多人以为是Spring提供的.而实际上是Java ...
- Puppeteer+RabbitMQ:Node.js 批量加工pdf服务架构设计与落地
全文约8500字,阅读时长约10分钟. 智慧作业最近上线「个性化手册」(简称个册)功能,一份完整的个性化手册分为三部分: •学情分析:根据学生阶段性的学习和考试情况进行学情分析.归纳.总结,汇总学情数 ...
- python运维工程师-cmdb项目-day2
1.捕获异常信息 import tracebackdef disk(): int('saaa')def run(): try: disk() except Exception: ret=traceba ...
- 快速上手Linux核心命令(八):网络相关命令
目录 前言 测试主机之间网络是否联通 ifconfig 配置或显示网络信息 route 显示或管理路由表 netstat 查看网络状况 telnet 远程登录主机 ssh 安全的远程登录主机 wget ...
- .NET开源分布式锁DistributedLock
一.线程锁和分布式锁 线程锁通常在单个进程中使用,以防止多个线程同时访问共享资源. 在我们.NET中常见的线程锁有: 自旋锁:当线程尝试获取锁时,它会重复执行一些简单的指令,直到锁可用 互斥锁: Mu ...
- Python Requets库学习总结
快速开始 发送请求 >>> import requests >>> r = requests.get('https://api.github.com/events' ...
- Python3.10动态修改Windows系统(win10/win11)本地IP地址(静态IP)
一般情况下,局域网里的终端比如本地服务器设置静态IP的好处是可以有效减少网络连接时间,原因是过程中省略了每次联网后从DHCP服务器获取IP地址的流程,缺点是容易引发IP地址的冲突,当然,还有操作层面的 ...