js历史记录实现方法
Sonder
2021-07-22
11883字
30分钟
浏览 (3.3k)
代码是 uniapp 的
功能有：搜索时、点击时添加历史记录，可删除单个历史记录，删除全部历史记录
<template>
<view class="search">
<view class="search-big-box">
<view class="search-box">
<view class="head-btn" @tap="navigateGoBack">
<uni-icons type="arrowleft" color="#8B8B8B" size="25"/>
</view>
<view class="head-center">
<uni-search-bar bgColor="#EEEEEE"
:class="{showBorderStyle:showBorderStyle}"
class="search-input"
:radius="100"
:focus="true"
@input="input"
@confirm="search"
cancelButton="none"
placeholder="请输入游戏名"
v-model="searchValue">
</uni-search-bar>
</view>
<view class="uni-page-head-ft">
<button class="btn" @click="search">搜索</button>
</view>
</view>
</view>
<view class="condition" v-if="gameCondition.length > 0">
<view
class="item"
v-for="(item, index) in gameCondition"
:key="index"
@click="changeHandlerItem(item.gameName)"
>
<image class="gameImg" src="https://zuiwangjia-images.oss-cn-chengdu.aliyuncs.com/20210630/8mHEcF_1625037725922"></image>
<text class="text">{{ item.gameName }}</text>
</view>
</view>
<div class="search-content" v-if="!gameCondition.length">
<div class="box">
<div class="title">
<div class="title-name">
<image class="fire" src="https://zuiwanjia-h5-images.oss-cn-chengdu.aliyuncs.com/v2phone/hot.png"></image>
<text class="text">热门搜索</text>
</div>
</div>
<div class="content">
<template v-for="(item,index) in games">
<view class="item" :class="{itemThree: index % 3 === 2}" :key="index" @click="changeHandlerItem(item.gameName)">{{ item.gameName }}</view>
</template>
</div>
</div>
<div class="box history-box">
<div class="title">
<div class="title-name">
<image class="time" src="https://zuiwanjia-h5-images.oss-cn-chengdu.aliyuncs.com/v2phone/history@2x.png"></image>
<text class="text">历史搜索</text>
</div>
<div class="title-tip" v-if="HistoryList.length > 0" @click="removeHistory()">
<text class="text">清除搜索记录</text>
</div>
</div>
<div class="history-content" v-if="HistoryList.length > 0">
<template v-for="(item,index) in HistoryList">
<view class="item" :key="index">
<text @click="changeHandlerItem(item)">{{ item }}</text>
<uni-icons type="close" color="#CDCDCD" size="25" @click="removeHistory(item)"/>
</view>
</template>
</div>
<div class="history-content history-empty-content" v-else>
<text class="empty">暂无历史记录</text>
</div>
</div>
</div>
</view>
</template>
<script>
export default {
data() {
return {
showBorderStyle: false,
searchValue: '',
// 搜索条件
gameCondition: [],
// 热门游戏，共9个
games: [
{
gameName: '天涯明月刀',
gameCode: 'TYMYD'
},
{
gameName: '英雄联盟',
gameCode: 'YXLM'
},
{
gameName: '天涯月刀',
gameCode: 'GASDAS'
},
{
gameName: '穿越火线',
gameCode: 'CSSDA'
},
{
gameName: '逆战',
gameCode: 'GBAS'
},
{
gameName: '王者荣耀',
gameCode: 'CASA'
},
{
gameName: '激战',
gameCode: 'DSADA'
},
{
gameName: '古剑奇谭',
gameCode: 'DSADA'
},
{
gameName: '永劫无间',
gameCode: 'DSADAS'
},
],
// 全部游戏
allGames: [
{
gameName: '天涯明月刀',
gameCode: 'TYMYD'
},
{
gameName: '英雄联盟',
gameCode: 'YXLM'
},
{
gameName: '天涯月刀',
gameCode: 'GASDAS'
},
{
gameName: '穿越火线',
gameCode: 'CSSDA'
},
{
gameName: '逆战',
gameCode: 'GBAS'
},
{
gameName: '王者荣耀',
gameCode: 'CASA'
},
{
gameName: '激战',
gameCode: 'DSADA'
},
{
gameName: '古剑奇谭',
gameCode: 'DSADA'
},
{
gameName: '永劫无间',
gameCode: 'DSADAS'
},
{
gameName: '摩尔庄园',
gameCode: 'MEZY'
},
],
// 历史记录
HistoryList: [],
}
},
methods: {
// 跳转到相应路由
gotoPage(gameName) {
// 搜索后的结果
let routerGameCode = null;
let routerGameName = null;
this.allGames.map(item => {
if (gameName === item.gameName) {
routerGameCode = item.gameCode;
routerGameName = item.gameName;
}
});
console.log(routerGameCode, 'routerGameCode');
},
changeHandlerItem(gameName){
this.search(gameName)
this.gotoPage(gameName)
},
removeHistory(v){
if(v) {
// 如果有值就是删除单个
if (uni.getStorageSync("HistoryList") && uni.getStorageSync("HistoryList") !== '[""]') {
let HistoryList = JSON.parse(uni.getStorageSync("HistoryList"));
this.HistoryList = HistoryList.filter(item => item !== v);
uni.setStorageSync("HistoryList", JSON.stringify(this.HistoryList));
}
} else {
// 否则删除全部
uni.removeStorageSync("HistoryList");
this.HistoryList = [];
}
},
search(v) {
let searchValue = v.trim() || this.searchValue.trim();
// 存入搜索历史记录
if (this.HistoryList.length > 0) {
if (this.HistoryList.indexOf(searchValue) !== -1) {
this.HistoryList.splice(this.HistoryList.indexOf(searchValue), 1);
}
}
this.HistoryList.unshift(searchValue);
if (this.HistoryList.length > 9) {
this.HistoryList.pop();
}
uni.setStorageSync("HistoryList", JSON.stringify(this.HistoryList));
},
//返回上一页
navigateGoBack() {
uni.navigateBack();
},
input(v) {
if(v) {
// 给搜索框加边框
this.showBorderStyle = true;
// 筛选游戏
this.gameCondition = this.allGames.filter(item => {
return item.gameName.indexOf(v) !== -1;
});
} else {
this.showBorderStyle = false;
this.gameCondition = [];
}
},
},
onReady() {
if (uni.getStorageSync("HistoryList") && uni.getStorageSync("HistoryList") !== '[""]') {
this.HistoryList = JSON.parse(uni.getStorageSync("HistoryList"));
}
}
}
</script>
<style lang="scss" scoped>
.search {
position: relative;
.condition {
z-index: 1;
position: absolute;
top: 100rpx;
width: 100%;
background-color: #fff;
margin-top: 20rpx;
.item {
display: flex;
align-items: center;
border-bottom: 2rpx solid #eee;
padding: 10rpx 35rpx;
.gameImg {
width: 80rpx;
height: 80rpx;
}
.text {
font-size: 28rpx;
padding: 30rpx 0;
margin: 0 36rpx;
}
}
}
.search-big-box {
width: 100%;
height: 100%;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #fff;
.search-box {
display: flex;
justify-content: space-between;
align-items: center;
height: 113rpx;
padding: 0 17rpx 0 8rpx;
.head-center {
flex: 1;
width: 100%;
}
.btn-icon {
color: #fff;
font-size: 54rpx;
}
.search-input {
/deep/ {
.uni-searchbar__box {
border-color: transparent;
}
.uni-searchbar__box-icon-search .uni-icons {
color: #B3B3B3 !important;
}
.uni-searchbar__text-placeholder {
color: #AAAAAA;
}
.uni-input-placeholder {
color: #AAAAAA;
}
}
}
.showBorderStyle {
/deep/ {
.uni-searchbar__box {
border-color: #657AFD;
}
.uni-searchbar__box-icon-search .uni-icons {
color: #657AFD !important;
}
.uni-input-input {
color: #657AFD;
}
}
}
.btn {
height: 68rpx;
line-height: 68rpx;
width: 120rpx;
background: linear-gradient(90deg, #6277FD 0%, #828BFA 100%);
border-radius: 34rpx;
color: #FFFFFF;
font-size: 28rpx;
}
}
.search-dropdown {
background-color: #fff;
}
}
.search-content {
margin-top: 47rpx;
padding: 0 36rpx;
.box {
.title {
margin-bottom: 32rpx;
display: flex;
justify-content: space-between;
.title-name {
display: flex;
align-items: center;
.fire {
margin-right: 16rpx;
width: 25rpx;
height: 31rpx;
}
.time {
margin-right: 10rpx;
width: 31rpx;
height: 31rpx;
}
.text {
font-size: 34rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
}
}
.title-tip {
text-align: center;
width: 180rpx;
height: 40rpx;
line-height: 40rpx;
background: #E1E6FA;
color: #7792EF;
border-radius: 20rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 500;
}
}
.content {
display: flex;
flex-wrap: wrap;
padding: 0 35rpx;
.item {
margin-right: 20rpx;
margin-bottom: 20rpx;
text-align: center;
width: 190rpx;
height: 68rpx;
line-height: 68rpx;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #565656;
background: #F3F3F3;
border-radius: 34rpx;
}
.itemThree {
margin-right: 0;
}
.active {
background: #F2F5FF;
color: #5F7EEC;
}
}
.history-content {
.item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 25rpx 0;
border-bottom: 2rpx solid #eee;
}
}
.history-empty-content {
text-align: center;
.empty {
color: #999;
font-size: 26rpx;
}
}
}
.history-box {
margin-top: 80rpx;
}
}
}
</style>