微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能

微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能热搜内容一般从接口遍历的,实现方法基本和搜索历史差不多

wxml页面

<view class="search-header"><view class="search-wrap"><image src="../../images/icon_sous2.png" class="search-icon" bindtap="searchFn"></image><input bindinput="searchText" value="{{searchValue}}" class="search-input-text" placeholder="水蜜桃" bindconfirm="searchFn" /><view><image src="../../images/cancel.png" hidden="{{searchValue.length<1}}" class="search-img" bindinput='watchinput' bindtap="clickdel"></image></view></view><view class="search-text" bindtap="searchFn">搜索</view>
</view>
<view class="search-keywords" hidden="{{historyKeyWordsDatas.length<1}}"><view class="title"><text>最近搜索</text><text  bindtap="clearHistory">清除</text></view><view class="search-content"><block><view class="search-item" wx:for="{{historyKeyWordsDatas}}" wx:key="index" data-text="{{item}}" bindtap="onClickHistoryItem">{{item.keywords}}</view></block></view>
</view>
<view class="search-keywords"><view class="title"><text>热门搜索</text></view><view class="search-content" bindtap="Hotsearch"><view class="search-item">水蜜桃</view><view class="search-item">车厘子</view><view class="search-item">香蕉</view><view class="search-item">青菜</view><view class="search-item">西葫芦</view></view>
</view>

css页面

/* pages/search/search.wxss */
@import "../../assets/fonts/iconfont.wxss";.search-header {display: flex;height: 88rpx;width: 100%;justify-content: space-between;}.search-header .search-wrap {margin: 0px 30rpx;width: 600rpx;height: 88rpx;background: #fff;position: relative;
}.search-header .search-wrap .search-icon {position: absolute;width: 29rpx;height: 29rpx;top: 28rpx;left: 25rpx;z-index: 999;
}
.search-img{position: absolute;width: 50rpx;height: 50rpx;right: 10rpx;top: 20rpx;
}.search-header .search-wrap .search-input-text {border: 1px solid #efefef;height: 60rpx;border-radius: 30rpx;position: absolute;top: 7px;width: 100%;box-sizing: border-box;text-align: center;background-color: #F5F5F5;padding-left: 30px;padding-right: 30px;font-size: 26rpx;
}
.search-text{width: 60rpx;height: 30rpx;font-size: 30rpx;color: #2F2F2F;text-align: center;line-height: 30rpx;margin-top: 30rpx;margin-right: 20rpx;
}
.search-keywords {width: 94%;padding: 3%;overflow: hidden;
}.search-keywords .title {font-size: 28rpx;color: #2F2F2F;display: flex;justify-content: space-between;
}.search-content {width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;margin-top: 20rpx;font-size: 26rpx;color: #8D8D8D;
}.search-content .search-item {margin: 1%;padding: 6rpx 30rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #efefef;border-radius: 10rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

js页面

Page({/*** 页面的初始数据*/data: {historyKeyWordsDatas: [],searchValue: "",detailDatas: {},seachList: [],noData: 'false',},searchText(e) {this.setData({searchValue: e.detail.value})},//点击搜索按钮  开始搜索searchFn(e) {var keywords = this.data.searchValueconsole.log(keywords)if (keywords == '') {wx.showToast({title: '请输入搜索内容',icon: 'none'})} else {var _this = thisvar historyKeyWordsDatas = wx.getStorageSync('KW') || []for (var i = 0; i < historyKeyWordsDatas.length; i++) {//遍历数组 如果两次搜索的值重复了就只添加一条 if (historyKeyWordsDatas[i].keywords == keywords) {historyKeyWordsDatas.splice(i, 1)}}if (historyKeyWordsDatas.length < 10) {historyKeyWordsDatas.unshift({keywords: keywords,cid: historyKeyWordsDatas.length});} else if (historyKeyWordsDatas.length >= 10) {historyKeyWordsDatas.pop();historyKeyWordsDatas.unshift({keywords: keywords,cid: historyKeyWordsDatas.length});};wx.setStorageSync('KW', historyKeyWordsDatas)_this.setData({historyKeyWordsDatas: wx.getStorageSync('KW'),searchValue: "",})wx.navigateTo({url: '../search-results/search-results?keywords=' + keywords,})}},//清空输入框内容clickdel: function (e) {this.setData({searchValue: "",})},// 点击搜索历史 实现搜索onClickHistoryItem: function (e) {console.log(e);var keywords = e.currentTarget.dataset.text.keywordswx.navigateTo({url: '../search-results/search-results?keywords=' + keywords,})},//清除搜索历史clearHistory() {var _this = thiswx: wx.showModal({title: "温馨提示！",content: "确定要删除搜索记录吗？",success: function (res) {if (res.confirm) {console.log("确认");_this.setData({historyKeyWordsDatas: []})wx: wx.removeStorage({key: "KW",suceess: function () {wx.setStorageSync("KW", [])}})}}})this.onLoad()},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var kWDatas = wx.getStorageSync('KW')this.setData({historyKeyWordsDatas: kWDatas,searchValue: "",})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

缓存里数据内容

微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能相关推荐

微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序中使用腾讯位置服务，点击地图获取poi，或者是关键词搜索
1.插件申请接入: 在腾讯公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 "腾讯位置服务地图选点&quo ...
微信小程序开发——实现修改文章富文本（hf_editor）输入框回显文章功能
文章发布界面就是一个类型选择.标题输入(input).内容输入(hf_editor) 代码就不详细说明了当我们需要修改博客的时候一般的界面显示就是显示一个和发布类似的输入框,只是里面存有之前填写的 ...
微信小程序——实现邀请好友，联系客服，分享，意见反馈等功能
在微信小程序的开发中,我们很多时候都要实现联系客服,邀请好友,分享,意见反馈等功能.在这里我为大家贴出实现代码. 这些功能都是组件的开放功能,通过给open-type赋不同的值来实现分享功能 < ...
微信小程序swiper实现轮播图，可触发点击事件
实现微信小程序轮换图切换,点击获取图片url,获取当前位置 1.index.js Page({ data: { autoplay: true, dotsBoll: fa ...
微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
【微信小程序】 wx.onBluetoothDeviceFound 安卓机第一次可以连接蓝牙设备，第二次搜索不到问题
问题: wx.onBluetoothDeviceFound 安卓机第一次可以连接蓝牙设备,第二次搜索不到问题原因: wx.onBluetoothDeviceFound这个方法只能找到新的蓝牙设备,之 ...
微信小程序退出页面时清除定时器
由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中比如 ...
微信小程序使用for循环展示图片，如果点击其中一个怎么获取该图片的src
在小程序中使用循环来展示图片时,可以使用 wx:for 指令.在使用 wx:for 指令时,可以使用变量来控制当前循环项. 举个例子,如果要循环展示图片列表,可以这样写: <view wx:fo ...

微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能

微信小程序搜索，搜索历史，清除搜索历史，以及点击搜索历史实现搜索功能相关推荐

最新文章

热门文章