【uniapp】实现历史搜索功能

代码

<template>
  <view class="wai">
    <view class="shuru">
      <input v-model="nickname" class="input" placeholder="请输入关键字" type="text" />
      <view @click="btnn" class="search-btn">搜索</view>
    </view>
    <view class="disf">
      <view class="lisi">历史搜索</view>
      <view class="" @click="qingk">清空</view>
    </view>
    <view class="liss">
      <view @click="lishi(it)" class="li" v-for="(it, index) in list" :key="index">{{ it }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { uniFetch } from '@/conmit/uniFetch.js';
import { onLoad } from '@dcloudio/uni-app';
const nickname = ref(''); //搜索关键字
const list = ref([]); //搜索历史列表
onLoad(() => {
  try {
    const storedLists = uni.getStorageSync('lists');
    // 确保 storedLists 是数组，如果不是则将其转换为数组或设置为空数组
    list.value = Array.isArray(storedLists) ? storedLists : [];
  } catch (error) {
    console.error('Error fetching history:', error);
    list.value = []; // 使用空数组作为回退
  }
});
const btnn = () => {
  console.log(nickname.value);
  // 确保昵称不是空的
  if (nickname.value) {
    // 调用之前确保list.value是数组
    if (!Array.isArray(list.value)) {
      list.value = [];
    }
    // 检查 nickname.value 是否已经在 list.value 中
    const index = list.value.findIndex((item) => item === nickname.value);
    if (index !== -1) {
      // 如果在列表中，先移除它
      const itemToRemove = list.value.splice(index, 1)[0];
      // 然后将它放在最前面
      list.value.unshift(itemToRemove);
    } else {
      // 如果不在列表中，直接添加到最前面
      list.value.unshift(nickname.value);
    }
    // 限制列表长度（可选）
    if (list.value.length > 10) {
      // 例如，限制为10个历史项
      list.value.pop();
    }
  }
  nickname.value = ''; //清空输入框内容
  uni.setStorageSync('lists', list.value); //把内容存储到本地
};
// 点击清除历史搜索记录
const qingk = () => {
  uni.removeStorageSync('lists'); //清除本地记录
  list.value = []; // 直接将 list.value 设置为空数组
};
// 点击历史记录可以直接搜索
const lishi = (it) => {
  nickname.value = it;
};
</script>

<style lang="scss" scoped>
.wai {
  //历史搜索列表
  .liss {
    display: flex;
    flex-wrap: wrap;
    .li {
      color: #000000;
      font-size: 26.92rpx;
      border-radius: 27rpx;
      border: 2rpx solid #e6e6e6;
      margin-right: 15.38rpx;
      margin-bottom: 15.38rpx;
      height: 53.85rpx;
      padding: 7.69rpx 23.08rpx;
    }
  }

  // 历史搜索
  .disf {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lisi {
    color: #000000;
    font-size: 30.77rpx;
    margin-bottom: 15.38rpx;
    font-weight: 700;
  }
  .shuru {
    display: flex;
    width: 688.46rpx;
    height: 69.23rpx;
    border-radius: 38rpx;
    border: 2rpx solid #ed1017;
    align-items: center; /* 垂直居中直接子元素 */
    margin-bottom: 30.77rpx;
  }
  .input {
    flex: 1; /* 占据剩余空间 */
    height: 100%; /* 与容器高度一致 */
    padding-top: 15.38rpx;
    padding-left: 23.08rpx;
    padding-bottom: 15.38rpx;
    box-sizing: border-box; /* 确保内边距不会增加元素的总宽度 */
  }
  .search-btn {
    height: 53.85rpx;
    margin-right: 7.69rpx;
    width: 100rpx;
    line-height: 69.23rpx; /* 设置行高以垂直居中文字 */
    text-align: center; /* 水平居中文字 */
    background-color: #ed1017; /* 设置背景色，如果需要的话 */
    color: white; /* 设置文字颜色，如果需要的话 */
    border-radius: 29rpx; /* 设置按钮的圆角 */
    font-size: 26.92rpx;
    line-height: 53.85rpx;
  }
  padding: 30.77rpx;
}
</style>