網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
以上為搜索界面
小程序wxml頁(yè)面
。
<input type="text" class="weui-search-bar__input" bindinput="input_key" bindconfirm="Load" value="{{input_key}}" />
<view class="weui-icon-clear" wx:if="{{input_key.length > 0}}" bindtap="clearInput">
<icon type="clear" size="12"></icon>
</view>
<view class="weui-search-bar__cancel-btn" bindtap="Load" data-type="1">搜索</view>
<view style="display: flex;align-items: center; margin-top:5px;">
<text class="titleHot">歷史記錄</text>
<icon class="clearHistory" type="clear" size="12" bindtap="remove"></icon>
</view>
<view class="listHotCi">
<view wx:for="{{history}}" class="hotCiText" data-id="{{item.name}}" wx:key="item" bindtap="historyJiLu">
<text >{{item.name}}</text>
</view>
</view>
小程序js頁(yè)面
。歷史記錄是先把獲取到的數(shù)據(jù),加入緩存,再取到緩存中的數(shù)據(jù),加到wxml需要用到的數(shù)組里,再判斷數(shù)組中是否已存在時(shí),最開始使用indexOf,但是返回值一直都是-1,解決方法和疑問在下一個(gè)文檔里
。
Page({
data: {
input_key: '',
history:[],
splist: []
},
Load: function (tag) {
var that = this;
if (this.data.input_key == "" ){
}
else if (this.data.input_key !== "") {
//歷史記錄寫入緩存和獲取
var array = that.data.history;
if (array.length < 8 && array.length > 0) {
// 判斷數(shù)組中是否已存在
var newArr = array.findIndex(function (item) {
return item.name === that.data.input_key;
});
console.log(newArr);
if (newArr != -1) {
// 刪除已存在后重新插入至數(shù)組
array.splice(newArr, 1)
array.unshift({ name: that.data.input_key })
} else {
array.unshift({ name: that.data.input_key })
}
} else if (array.length =0){
array.unshift({ name: that.data.input_key })
}
else {
array.pop()//刪掉舊的時(shí)間最早的第一條
array.unshift({ name: that.data.input_key })
}
wx.setStorageSync('lishi', array);
that.getHistory();
}
},
//清除文本框的value
clearInput:function(){
var that = this;
that.setData({
input_key : ""
})
},
//歷史記錄獲取緩存
getHistory:function(){
var that=this;
wx.getStorage({
key: "lishi",
success: function (res) {
that.setData({
history: res.data
})
}
})
},
//清除歷史記錄
remove:function(e){
var that = this;
wx.removeStorageSync('lishi')
that.setData({
history: [],
})
},
//點(diǎn)擊歷史記錄中的標(biāo)簽,搜索
historyJiLu:function(e){
var that = this;
that.setData({
input_key: e.currentTarget.dataset.id
})
this.Load();
},
onLoad: function (options) {
this.getHistory();
},
})
原文鏈接:https://blog.csdn.net/Zan_Z/article/details/104984832
相關(guān)推薦
- 2022-09-13 Android實(shí)現(xiàn)縮放動(dòng)畫_Android
- 2023-02-04 Qt信號(hào)與槽知識(shí)點(diǎn)總結(jié)歸納_C 語(yǔ)言
- 2021-12-12 linux縮減XFS分區(qū)格式的根目錄_Linux
- 2023-01-31 golang定時(shí)任務(wù)cron項(xiàng)目實(shí)操指南_Golang
- 2022-04-15 ASP.NET?Core基礎(chǔ)之啟動(dòng)設(shè)置_基礎(chǔ)應(yīng)用
- 2022-10-15 詳解C語(yǔ)言中雙指針?biāo)惴ǖ氖褂胈C 語(yǔ)言
- 2022-12-06 .net程序開發(fā)IOC控制反轉(zhuǎn)和DI依賴注入詳解_ASP.NET
- 2022-04-28 基于OpenCV實(shí)現(xiàn)視頻循環(huán)播放_(tái)python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支