微信小程序 - 实现搜索界面(带热搜、搜索历史和结果页)
2024-06-04 08:58:18
GitHub Demo 地址:
jh-weapp-demo实现一些常用效果、封装通用组件和工具类
小程序码
效果图：
wxml 代码：
<van-search value="{{ inputValue }}" maxlength="15" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="onChange" /><view class='{{isShowResultView?"normalBgView-hidden":"normalBgView"}}'><view class="hotSearchBgView"><view class="hotSearchTitleView"><view class="hotSearchTitle">热门搜索</view><van-icon name="delete" class="hotSearchCleanBtn" bindtap='CleanHotSearch' /></view><view class="hotSearchTagBgView"><view class="hotSearchTag" wx:for="{{hotSearchArr}}" wx:key="index" bindtap='ClickHotSearchItem' data-text='{{item}}'>{{item}}</view></view></view><view class="historyBgView"><view class="historyTitleView"><view class="historyTitle">搜索历史</view><van-icon name="delete" class="historyCleanBtn" bindtap='CleanHistory' /></view><view class="historyTagBgView"><view class="historyTag" wx:for="{{searchHistoryArr}}" wx:key="index" bindtap='ClickHistoryItem' data-text='{{item}}'><van-icon class="historyIconLeft" name="clock-o" color="#969696" size="20px" /><view class="historyText"> {{item}}</view><van-icon class="historyIconRight" name="cross" color="#969696" size="20px" catchtap='CleanHistoryItem' data-text='{{item}}' /></view></view></view>
</view><view class='{{isShowResultView?"resultBgView":"resultBgView-hidden"}}'><view class="resultCell" wx:for="{{searchResultArr}}" wx:key="index" bindtap='ClickResultItem' data-text='{{item}}'><van-icon name="search" color="#969696" size="20px" /><view class="resultText"> {{searchResultArr[index]}}</view></view>
</view>
wxss 代码：
page {height: 100%;/* background-color: #F5F5F5; */background: white;
}.normalBgView {background: white;
}.normalBgView-hidden {display: none;
}/* 热搜 */
.hotSearchBgView {background: white;/* background: yellow; */
}.hotSearchTitleView {height: 60rpx;display: flex;justify-content: space-between;align-items: center;
}.hotSearchTitle {padding-left: 30rpx;font-size: 28rpx;
}.hotSearchCleanBtn {padding-right: 30rpx;
}.hotSearchTagBgView {padding: 10rpx;display: flex;flex-wrap: wrap;
}.hotSearchTag {width: auto;height: 48rpx;line-height: 48rpx;background: rgba(246, 246, 246, 1);border-radius: 10rpx;padding: 5rpx 25rpx;font-weight: 300;font-size: 28rpx;color: #4A4A4A;margin: 10rpx;background: rgb(240, 240, 240);/* background: wheat; */
}/* 搜索历史 */
.historyBgView {background: white;
}.historyTitleView {height: 60rpx;display: flex;justify-content: space-between;align-items: center;
}.historyTitle {padding-left: 30rpx;font-size: 28rpx;
}.historyCleanBtn {padding-right: 30rpx;
}.historyTag {padding-left: 30rpx;height: 100rpx;border-bottom: 1px solid rgb(230, 230, 230);display: flex;align-items: center;
}.historyIconLeft {flex: 5;
}.historyText {flex: 90;padding-left: 25rpx;
}.historyIconRight {flex: 5;padding-right: 30rpx;
}.resultBgView {background: white;
}.resultBgView-hidden {display: none;
}.resultCell {padding-left: 30rpx;height: 100rpx;border-bottom: 1px solid rgb(230, 230, 230);display: flex;align-items: center;
}.resultText {padding-left: 30rpx;
}
微信小程序 - 实现搜索界面(带热搜、搜索历史和结果页)相关推荐
- 2023新版 多功能去水印工具微信小程序源码_带流量主功能(已更新)
简介: 2023新版 多功能去水印工具微信小程序源码_带流量主功能 自带去水印接口的多功能小程序 支持各大平台短视频去水印 支持保存封面,图集,标题等等 支持本地图片去水印 支持图片拼接 支持九宫格切 ...
- 在微信小程序上,帮助中心界面实现类似手风琴案例
在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...
- thinkphp三级分销小程序源码_山东谷道微信小程序商城源码带后台 公众号平台三级分销系统...
山东谷道微信小程序商城源码带后台 公众号平台三级分销系统 那么微信二级分销系统与微信三级分销系统到底有什么区别和联系呢?为什么改了个数字地位就天差地别? 1.微信分销模式等级的区别 用简洁的话来说,微 ...
- 微信小程序汇率计算界面
微信小程序汇率计算界面 最近在学习微信小程序,自己制作了一个自己想制作的小应用--汇率计算界面(真不知道为什么自己对汇率那么感兴趣XD ) 数据接入 在获取数据之前先在data里面添加几个参数 mon ...
- 微信小程序的登录界面实现
微信小程序的登录界面实现 <view class="container"><view class="wrapper"><view ...
- 第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面 前言 一.Pages 二.TabBar 总结 前言 本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面 一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
- 微信小程序：简洁界面清爽让人非常舒服的一款短视频去水印微信小程序
总得来说这是一款以各大平台短视频去水印为主的一款小程序源码 内含支持多平台的接口 支持短视频和图集去水印 小编个人觉得界面让人看起来特别的清爽特别的舒服 没有那么多的花里胡哨的,另外小编也给它添加了多 ...
- 微信小程序跳转页面带参数
微信小程序跳转页面带参数 1.给参数赋值 2.跳转页面 3.在目的地页面的onload里打印即可得到上个页面带过来的参数 4.完整的带参跳转方法(js)
- 微信小程序：笑话段子手微信小程序源码自带内容采集随时有新内容
这是一款笑话段子的一款微信小程序源码 内容支持采集而来,所以不需要担心内容的问题 该小程序目前分三个分类,推荐,段子 ,图片 安装方法, 使用微信开发者工具打开源码 然后设置一个合法域名 设置好了以后 ...
最新文章
- English trip -- Review Unit1 Personal Information 个人信息
- tcpdump 识别成dns_1.6.3 使用tcpdump观察DNS通信过程
- 最优化理论与方法(part5)--函数和微分
- after markup mount - how is converted source code got executed
- java的类属性默认有this 但容易与参数重名 所以需要显性的加上this 以分区别
- 光端机与光纤收发器的区别
- jquery 获取索引值在一定范围的列表
- c语言学习-求一元二次方程的根
- Listen 0.0.0.0:80 Listen [::0]:80
- ES6的新特性,前端必看知识点
- Java将指定文件/文件夹压缩成zip、rar压缩文件--解決中文乱码
- Android软键盘删除键触发Activity的返回事件
- SEO优化外包 避坑指南
- UWB测距及定位原理
- ajax提交图片流，img显示
- 基于python毕业设计毕设课题选题参考
- 多传感器的联合标定（三）
- thinkphp图片集合
- 纵断面 java_道路土方计算软件
- 1.cpt介绍与思科设备的基本配置