頁面緩存的操做（搜索歷史記錄），頁面搜索功能實現

時間 2019-11-10

標籤頁面緩存搜索歷史記錄功能實現简体版

原文原文鏈接

搜索與顯示歷史記錄功能的實現

需求

完成一次搜索記錄一次搜索，之後進入搜索頁面會顯示搜索歷史，點擊刪除小圖標會清空全部緩存git

分割功能需求

主要分割爲這幾個步驟：github

進入搜索後判斷緩存中是否有值，若是沒有緩存，隱藏曆史記錄跟小圖標，若是有緩存，加載緩存，將緩存的內容加載進預先製做的顯示容器中，而且在上方顯示歷史記錄跟小圖標；
輸入值後，點擊完成，判斷是否有搜索結果，若是有，保存搜索記錄，放進緩存，而且顯示搜索結果，此時須要隱藏曆史記錄的container,隱藏完成按鈕，上方的搜索框的長度變長，顯示結果的container,而且input框中的值爲不變，保存在input框中，沒有就返回空
刪除緩存

第一步

實現：緩存

onLoad: function (options) {
    const inputValue = options.inputValue;
    if (wx.getStorageSync('searchData') == '') {
      this.setData({
        isHide: true,
        isCover: true,
      })
    } else {
      this.setData({
        inputValue: inputValue,
        confirm: '完成',
        sercherStorage: wx.getStorageSync('searchData') || [],
        isHide: false,
        isShow: true
      })
    }  
  },

效果：
xss

第二步

實現：ide

changeValue(e) {
    let inputValue = e.detail.value;
    if (inputValue == '') {
      this.setData({
        confirm: '取消',
        isConfirm: false,
        isHide:false, //顯示歷史記錄container
        width: '85%',
        isShow: true,  //顯示圖標以及標籤欄  
        isCover:true //隱藏搜索結果的container
      })
    } else {
      this.setData({
        confirm: '完成',
        inputValue: inputValue
      })
    }
  },//監聽輸入

  confirmValue(e) {
    let value = this.data.inputValue;//獲取輸入值
    if (this.data.confirm === '完成') {
      let result = [];
      for (let i in jobList) {
        if (jobList[i].jobName.indexOf(value) >= 0){
          result.push(jobList[i]);
          this.setData({
            result
          })
        }
        if(this.data.result.length == 0) {      
          wx.showToast({
            title: '未找到數據',
          });
          this.setData({
            isConfirm: false,
            isHide: false
          })
        }
      }//搜索數據匹配
         
      // 第二種搜索方法 正則匹配
      // let result=[];
      // let reg=new RegExp(value);
      // for(var i=0;i<jobList.length;i++){
      //   if(jobList[i].jobName.match(reg)){
      //     result.push(jobList[i]);
      //     this.setData({
      //       result
      //     })
      //   }
      // }
     let searchData = this.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: value
      })
      wx.setStorageSync('searchData', searchData); //設置緩存
      this.setData({
        isConfirm: true,  //隱藏搜索按鈕
        width: '95%',
        inputValue: value,
        isHide: true,   //隱藏曆史記錄container
        isShow: false,    //隱藏圖標以及標籤欄
        isCover: false    //顯示搜索結果
      })
    } else {
      wx.navigateBack({
        delta: 1, // 回退前 delta(默認爲1) 頁面
      })
    }//點擊取消回到上個頁面

  },

效果：flex

第三步

clearStorage(e) {
    wx.clearStorageSync('searchData');//清除緩存
    wx.showModal({
      title: '提示',
      content: '肯定刪除所有歷史記錄？',
      success: (res) => {
        if (res.confirm) {
          this.setData({
            sercherStorage: [],
            isShow: false
          })
        } else if (res.cancel) {
          return false;
        }
      }
    })
  },

完整代碼

wxml:this

<import src="../../templates/template" />
<view class="searchContainer">
    <view class="search" style="width:{{width}};">
        <image class="searchImg" src="../../youzan-image/search.png"></image>
        <input class="searchInput" value="{{inputValue}}" auto-focus bindinput="changeValue" />
    </view><import src="../../templates/template" />
    <view class="cancleSearch {{isConfirm?'hide':''}}" bindtap="confirmValue">{{confirm}}</view>
    <view class="history {{isHide?'hide':''}}">
        <view class="history-header {{isShow?'':'hide'}}">
            <view class="title">歷史搜索</view>
            <image class="delectHistory" src="../../youzan-image/delete.png" bindtap="clearStorage"></image>
        </view>
        <view class="history-content">
            <view wx:for="{{sercherStorage}}" wx:key="item.id">
                <view class="content">{{item.name}}</view>
            </view>
        </view>
    </view>
    <view class="result {{isCover?'hide':''}}">
    <view wx:for="{{result}}" wx:key="index" data-index="{{index}}">
        <template is="list-item" data="{{...item}}" />
    </view>
    <!-- <view class="a">test</view> -->
    </view>
</view>

wxss:spa

page {
    margin: 0;
    padding: 0;
}

.searchContainer {
    position: relative;
    width: 100%;
    height: 100rpx;
    border-bottom: 8rpx solid #fbfbfb;
    margin-left: 20rpx;
}

.search {
    position: relative;
    margin-top: 20rpx;
    width: 85%;
    height: 60rpx;
    border: 3rpx solid #e8e8e8;
    border-radius: 80rpx 80rpx 80rpx 80rpx;
    float: left;
}

.searchInput {
    position: absolute;
    left: 65rpx;
    top: 5rpx;
    font-size: 15px;
    color: #323230;
}

.searchImg {
    position: absolute;
    left: 26rpx;
    top: 12rpx;
    width: 35rpx;
    height: 35rpx;
}

.cancleSearch {
    position: absolute;
    right: 0;
    width: 126rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 15px;
    color: #323232;
}

.hide {
    display: none;
}

.history {
    float: left;
    position: relative;
    height: 100%;
    width: 100%;
}

.history-header {
    float: left;
    position: relative;
    height: 110rpx;
    width: 100%;
}

.title {
    position: absolute;
    font-size: 13px;
    color: #313131;
    left: 7rpx;
    top: 38rpx;
}

.delectHistory {
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    top: 43rpx;
    right: 57rpx;
}

.history-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: space-around;
    flex-wrap: wrap;
    margin-right: 50rpx;
    height: 100%;
    width: 650rpx;
}
.content {
    font-size: 13px;
    max-width: 400rpx; //緩存顯示最大寬度
    margin-top: 20rpx;
    padding-left: 15rpx;
    padding-right: 15rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: #757575;
    text-align: center;
    border-radius: 50rpx;
    background-color: #f8f9fb;
    overflow: hidden;
    text-overflow: ellipsis; //文本超出400rpx的後面的內容用省略號代替
    white-space: nowrap;
    letter-spacing: 1px;
}