網(wǎng)站首頁 編程語言 正文
以上為搜索界面
小程序wxml頁面
。
<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頁面
。歷史記錄是先把獲取到的數(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-05-03 使用EF的Code?First模式操作數(shù)據(jù)庫_實(shí)用技巧
- 2023-04-24 Python?語法錯(cuò)誤:"SyntaxError:?invalid?character?in?ide
- 2022-08-29 Python使用re模塊實(shí)現(xiàn)正則表達(dá)式操作指南_python
- 2023-01-18 淺析Python的對象拷貝和內(nèi)存布局_python
- 2022-05-11 hive 安裝步驟以及問題解決方案
- 2021-11-28 C#?通過同步和異步實(shí)現(xiàn)優(yōu)化做早餐的時(shí)間_C#教程
- 2022-08-30 Python?selenium下拉選擇框?qū)崙?zhàn)應(yīng)用例子_python
- 2022-02-28 npm install安裝報(bào)錯(cuò) gyp info it worked if it ends with
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- 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)-簡單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支