img

js历史记录实现方法

2021-07-22 0条评论 3.2k次阅读 JavaScript


代码是 uniapp

功能有:搜索时、点击时添加历史记录,可删除单个历史记录,删除全部历史记录

image.png

<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>

💬 COMMENT


🦄 支持markdown语法

👋友