网易云音乐开发--历史记录模块实现

历史记录板块静态搭建

先写一个静态页面

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

添加搜索历史记录

将请求获取关键字添加到历史记录中，先初始化一个historyList:[]，然后从data中拿数据

但存在一个问题，当我们刷新时，它就会失去数据，因此我们需要使用本地存储来存数据

 现存数据，然后在读数据

 然后就存到了本地，再读取出来，放到data中

 动态的渲染出来，但要考虑俩条历史记录不能一样

 用indexOf找到了相同的就删掉它historyList.splice(historyList.indexOf(searchContent),1)

否则就添加进去

现在我们还需要写一个清空的效果

 

清空搜索内容

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

删除搜索历史记录

俩个操作

清空data中historyList

移出本地记录缓存

但是这样并不是很友好，优化一下。添加一个询问框

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

搜索页面关联项目

老样子在这个view上绑定一个事件进行跳转