微信小程序实现搜索功能(搜索历史清空历史搜索发现等操作)

先看看效果图

比较简单,不做过多的解释了,直接看代码:

html

<view class="navbar custom-class" style='height:{{navHeight}}px;'><view class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;'><image style="width: 17.5px; height: 18px; padding-top: 3px;" src="{{leftIcon}}" catchtap="goBack"></image></view><view class='navbar-title' style='top:{{navTop}}px'><view class="search-input"><span class="search-con"><view class="center-30f2b4d"><image class="icon" src="{{searchIcon}}" catchtap="searchbegin" data-postname="{{inputValue}}"></image><input class="search-size" confirm-type="search" value="{{inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品" placeholder-class="phcolor" bindconfirm="searchbegin" data-postname="{{inputValue}}"></input></view></span></view></view></view><view class="read-in" style="margin-top: {{navHeight}}px"><view class="headline" wx:if="{{historyStorage.length!=0}}" hidden="{{historyStorageShow?false:true}}"><view class="head-headline justify"><view class="headline-size">搜索历史</view><view class="icon-right size" catchtap="remove"><image src="/tu-129.png"></image></view></view><view class="lately-main"><view class="chunk" wx:for="{{historyStorage}}" wx:key="index" bindtap='searchbegin' data-index='{{index}}' data-postname="{{item}}"><text>{{item}}</text></view></view></view><view class="headline"><view class="head-headline"><view class="headline-size">搜索发现</view> </view><view class="lately-main"><view class="chunk" wx:for="{{hotsearch1}}" wx:key="index" catchtap="searchbegin" bindtap="getInputValue" data-postname="{{item.title}}"><text>{{item.title}}</text></view></view></view></view><view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult}}" ><view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}"><view>{{item.result}}</view><image src="{{upperLeftArrow}}"></image></view></view><view class="searchresult" wx:if="{{inputValue != ''}}" hidden="{{searchresult?false:true}}" ><view class="result" wx:for="{{searchResult}}" catchtap="searchbegin" wx:key="index" bindtap="getInputValue" data-postname="{{item.result}}"><view>{{item.result}}</view><image src="{{upperLeftArrow}}"></image></view></view>

最后下面的搜索结果我没用,单独拉出来了一个页面做结果页,看自己需求改一下就好

wxss

/* pages/commodity/commodity-search/index.wxss */page {background: white;}.navbar {width: 100%;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 10;flex-shrink: 0;}.navbar-title {width: 100%;box-sizing: border-box;padding-left: 40px;padding-right: 120px;height: 33px;line-height: 33px;position: fixed;left: 0;z-index: 10;color: #333;font-size: 16px;font-weight: bold;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: flex;align-items: center;}.navbar-action-wrap {display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;left: 10px;z-index: 11;line-height: 1;padding-top: 4px;padding-bottom: 4px;position: fixed;}.navbar-action-group {border-radius: 20px;overflow: hidden;}.navbar-action_item {padding: 3px 0;color: #333;}.navbar-action-group .navbar-action_item {border-right: 1px solid #f0f0f0;padding: 3px 14px;}.icon-right image {width: 25rpx;height: 26rpx;}.navbar-action-group .last {border-right: none;}.navbar-title-size {font-size: 10px;margin-right: 20rpx;align-self: center;margin: 0 auto;}.navbar-title-size.active {color: red;border-bottom: 2px solid red;}.scroll-box {position: absolute;height: 100%;}.search-input {width: 100%;height: 28px;line-height: 28px;background: #f6f6f6;border-radius: 30rpx;/* margin-top: 2px; */font-size: 25rpx;}.search-con {display: flex;align-items: center;}.search-con .center-30f2b4d {height: 28px;line-height: 28px;flex: 1;display: flex;align-items: center;}.search-con .center-30f2b4d .icon {width: 15px;height: 15px;align-self: center;margin: 0 10px;}.search-con .center-30f2b4d .search-size {width: 70%; font-size: 12px;font-family: "微软雅黑";}.phcolor {color: #999999;}/* nav E *//* 标题部分 */.read-in {padding: 0 40rpx;}.headline {padding-top: .5rem;}.head-headline {width: 100%;height: 45rpx;position: relative;display: flex;font-size: 28rpx;font-weight: bold;align-items: center;justify-content: space-between;}/* 内容部分 */.lately-main {margin-top: 20rpx;overflow: hidden; }.lately-main .chunk {display: inline-block;font-size: 24rpx;line-height: 20rpx;padding: 10rpx 21rpx;background: #f5f5f5;margin-right: 20rpx;border: 1px solid #DCDCDC;border-radius: 18.5rpx;color: #666666;margin-bottom: 26rpx;/* float: left; */}.searchresult {margin-top: 20px; position: absolute;top: 55px;left: 0;width: 100%;background: #fff;}.result {height: 50px;line-height: 50px;text-align: left;border-bottom: 1px solid #eee;padding: 0 30rpx;color: #333;font-family: "微软雅黑";font-size: 30rpx;display: flex;align-items: center;justify-content: space-between;}.result image {width: 50rpx;height: 50rpx;}

js 核心代码

// pages/commodity/commodity-search/index.jsconst App = getApp()Page({/*** 页面的初始数据*/data: {// 自定义顶部导航navHeight: App.globalData.navHeight,navTop: App.globalData.navTop,// 图标leftIcon: "/tu-130.png",searchIcon: "/tu-99.png",recommend: [ //热门推荐{title: "冰箱"},{title: "红魔手机"},{title: "洗衣机"},{title: "电视机"},{title: "冰箱双门"},{title: "海尔洗衣机滚筒"},{title: "手机自营"},{title: "小天鹅洗衣机全自动"},{title: "手机"},{title: "笔记本"}],historyStorage: [], //历史搜索historyStorageShow: false,hotsearch1: [{ title: "短裤" }, { title: "背带裙" }, { title: "牛仔裤男" }, { title: "运动休闲男鞋" }, { title: "蕾丝连衣裙" }, { title: "电视" }, { title: "长裙" }, { title: "oppo" }, { title: "蓝牙耳机" }, { title: "女包" }, { title: "格力空调" }, { title: "魅族" }],inputValue: "", //输入框输入的值replaceValue: "",//替换输入框的值eye: true, //显示隐藏searchresult: false,// searchResult: [{ result: "苹果手机" }, { result: "手机支架" }, { result: "手机自营" }, { result: "手机套" }, { result: "手机膜" }, { result: "手机卡" }, { result: "手机报" }, { result: "苹果手机壳" }, { result: "手机车载支架" }]//虚拟的查询结果},// 点击返回上一级goBack: function () {// let pages = getCurrentPages();//获取小程序页面栈// let beforePage = pages[pages.length - 2]; //获取上个页面的实例对象// beforePage.setData({// txt: "修改数据了"// })// beforePage.goUpdate(); //触发上个页面自定义的go_update()方法wx.navigateBack({delta: 1})},/*** 获取顶部固定高度*/attached: function () {this.setData({navHeight: App.globalData.navHeight,navTop: App.globalData.navTop,})},/*** 热门搜索显示隐藏*/reye: function () {this.setData({eye: !this.data.eye})},/*** 清除*/remove: function () {var _this = thiswx: wx.showModal({content: '确认清除所有历史记录?',success: function (res) {if (res.confirm) {wx: wx.removeStorage({key: 'historyStorage',success: function (res) {_this.setData({historyStorage: []})wx.setStorageSync("historyStorage", [])},})} else {console.log("点击取消")}},})},/*** 获取input的值*/getInputValue(e) {// console.log("获取到了", e.currentTarget.dataset.value)// console.log("获取value值",e.detail) // {value: "ff", cursor: 2}this.setData({inputValue: e.detail.value})// this.setData({// searchresult: true,// })},/*** 点击搜索提交跳转并存储历史记录*/searchbegin: function (e) {let _this = thisvar data = e.currentTarget.dataset;_this.data.replaceValue = e.currentTarget.dataset.postname// _this.data.replaceValue = wx: wx.setStorage({key: 'historyStorage',data: _this.data.historyStorage.concat(_this.data.inputValue).reverse(),data: _this.data.historyStorage.concat(_this.data.replaceValue).reverse()})// console.log(_this.data.inputValue)// console.log(_this.data.historyStorage)// console.log(data['postname'])if (data['postname'] == '') {wx.showToast({title: '请先输入品牌或商品',icon: 'none'})} else {wx.redirectTo({url: '../../commodity/commodity-search-list/index?postName=' + data['postname'] + '&searchtype=' + _this.searchtype})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 历史搜索let that = this;that.searchtype = options.searchtype;wx.getStorage({key: 'historyStorage',success: function (res) {// console.log(res.data)that.setData({historyStorageShow: true,historyStorage: res.data})}})this.setData({inputValue: options.inputValue})this.data.inputValue = options.inputValue// console.log(this.data.inputValue)},goUpdate: function () {this.onLoad()// console.log("我更新啦")},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

json 自定义顶部导航配置custom

{"navigationStyle": "custom","usingComponents": {}}

app.js

App({globalData: {navHeight: 0,navTop: 0,windowHeight: 0},onLaunch: function (options) {var _this = this;let menuButtonObject = wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({success: res => {//导航高度let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;this.globalData.navHeight = navHeight;this.globalData.navTop = navTop; //navTopthis.globalData.windowHeight = res.windowHeight;},fail(err) {console.log(err);},})},})

以上就是所有代码,直接拿过来用就好,