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

最新推荐文章于 2025-09-04 16:35:23 发布

真爱计划

最新推荐文章于 2025-09-04 16:35:23 发布

阅读量294

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：数学建模

本文链接：https://blog.csdn.net/weixin_64612659/article/details/130821131

微信小程序专栏收录该内容

55 篇文章

订阅专栏

本文介绍了如何在小程序中搭建历史记录板块，包括创建静态页面结构，设置样式，以及利用本地存储管理搜索历史数据。当用户刷新时，数据不会丢失，通过indexOf方法避免重复记录。同时，文章提到了添加清空搜索历史的功能，以及通过弹窗确认删除的优化措施。

历史记录板块静态搭建

先写一个静态页面

<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')
                    }
          }
        })
        
    },