Netease cloud music development--realization of history record module

History plate static construction

Write a static page first

<view class="history">
        <view class="title">
            历史
        </view>
        <view class="historyItem">
            你好
        </view>
        <!-- 删除 -->
        <view class="iconfont icon-shanchu delete">
            
        </view>
    </view>




.history{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    
    line-height: 50rpx;
    margin: 20rpx 0;
}
.history .title{
    font-size: 28rpx;
}
.history .historyItem{
    height: 50rpx;
    font-size: 26rpx;
    background: #ededed;
    margin-left: 20rpx;
    padding: 0 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
.history .delete{
    position: absolute;
    bottom: 10rpx;
    right: 15rpx;
    font-size: 36rpx;
}

add search history

Add the request to get the keyword to the history record, first initialize a historyList:[], and then get the data from the data

But there is a problem, when we refresh, it will lose data, so we need to use local storage to store data

 Existing data, and then read data

 Then save it locally, read it out, and put it in data

 Dynamic rendering, but it must be considered that the two historical records cannot be the same

 Use indexOf to find the same and delete it historyList.splice(historyList.indexOf(searchContent),1)

otherwise add it

Now we also need to write a clearing effect

 

clear search

clearSearchContent(){
        this.setData({
            searchContent:'',
            searchList:[]
        })
    }

delete search history

two operations

Clear the historyList in data

Move out of local record cache

But this is not very friendly, optimize it. Add a query box

deleteSearchHistory(){
        wx.showModal({
          content: '确定删除吗？',
          success:(res)=>{
            if(res.confirm){
                // 清空data中historyList
                this.setData({
                    historyList:[]
                })
                // 移出本地记录缓存
                wx.removeStorageSync('searchHistory')
                    }
          }
        })
        
    },

Search Page Associated Items

In the old way, bind an event on this view to jump