uni-app开发小程序中的历史记录

1.首先，你要把你搜索道的内容存到本地
2.然后在页面取出来
3.渲染页面即可
4.重复搜索过的会把之前的删除，添加最新的
5.这里还包括一键清空所有
注意这里的搜索历史记录是真实项目中的的案例包括细节处理的也很到位

<template><view><u-sticky offset-top="0"><view class="song-search-block"><view class="song-search"><input clearable v-model="param.keyword" @confirm="submitSearch" confirm-type="search" :focus="true" placeholder="搜索歌曲" placeholder-class="song-search-holder"/><image src="@/static/icon_music_search.png"/>   <view class="close" v-show="param.keyword.length > 0" @click="remLoend">&#xe646;</view></view></view><block v-if="param.total==2 && list.length==0"><view class="liclass" v-if="andlists.length != 0 "><view><text>搜索历史</text></view><view @click="delelist"><image id="picture" src="https://image.renrenjiang.cn/shiquyun/icons/icon_search_clear.png"/><text id="empty">清空</text></view></view><view class="andlist"><view v-for="(item,index) in andlists" :key='index'><view class="adming" @click='addlist(item.name)'><image src="@/static/icon_music_search.png"/><text>{{item.name}}</text> </view></view></view></block></u-sticky><sqy-list-null v-if="param.total==0 && list.length==0" icon="https://image.renrenjiang.cn/shiquyun/icons/icon_comment_null.png" text="会在1个工作日内为您添加该歌曲"></sqy-list-null><view class="song-list"><block v-for="(n,i) in list" :key="i"><view @click="pageToDetail(n.id)" class="song-item"><image class="song-item-cover" :src="n.cover + '?x-oss-process=image/resize,w_200/quality,q_60'"/><view class="song-item-title">{{n.title}}</view><view class="song-item-singer">{{n.singer}}</view><view class="song-item-draws">已有{{n.drawingCount}}人唱过<image src="@/static/icon_song_hot.png"/></view><view class="song-item-btn">K歌</view></view></block><u-loadmore v-if="list.length>0" :icon="true" :status="status"/></view></view>
</template><script>export default {data() {return {param: {keyword: '',page: 1,rows: 10,total: 2,type: 0},list: [],status: 'loadmore',timestamp: null,andlists:[],vauleEmpty:false}},onLoad(options) {this.huoindes()if(options.timestamp) this.timestamp = options.timestamp;},methods: {delelist(){uni.removeStorage({key: 'uni-key',})this.huoindes()},remLoend(){this.param.keyword = ""this.vauleEmpty = false},addlist(item){console.log(item)this.param.keyword = itemthis.loadData();},submitSearch(){if(this.param.keyword.trim()==''){return;};this.param.page = 1;this.loadData();  var newArr = this.andlistslet tath = thisvar array = newArr.findIndex(function(item){return item.name === tath.param.keyword})console.log(array)if(array === -1){this.andlists.unshift({name:this.param.keyword})}if(array != -1){this.andlists.splice(array,1)this.andlists.unshift({name:this.param.keyword})}if(this.andlists.length > 5 ){this.andlists.pop()}uni.setStorage({key:'uni-key',data:this.andlists})this.huoindes()},huoindes(){var add = uni.getStorageSync('uni-key') || []this.andlists = add},pageToDetail(musicId){if(this.timestamp){uni.navigateTo({url: '/songs/songdetail/songdetail?musicId=' + musicId + '&timestamp=' + this.timestamp});return;}uni.navigateTo({url: '/songs/songdetail/songdetail?musicId=' + musicId});if(this.param.keyword != ""){this.vauleEmpty = true}},async loadData(){let res = await this.$u.post(getApp().globalData.baseUrl + 'api/music/search', this.param);if(this.param.page==1) this.list = [];res.data.forEach((item)=>{this.list.push(item);});this.param.total = res.page.pages;if(this.param.page<this.param.total){this.status = 'loadmore';}}},onReachBottom() {if(this.param.page>=this.param.total){this.status = 'nomore';return;}this.status = 'loading';this.param.page++;this.loadData();}}
</script><style lang="less">.close {position: absolute;top: 50%;right: 26rpx;width: 48rpx;height: 48rpx;line-height: 48rpx;text-align: center;font-family: 'aliglobal';font-size: 40rpx;color: #bababa;color: 28rpx;transform: translateY(-50%);}.andlist {margin-top: 24rpx;.adming{width: 100%;height: 44rpx;margin-top: 40rpx;display: flex;align-items: center;image {width: 32rpx;height: 32rpx;margin-left: 24rpx;}text {margin-left: 16rpx;top: -10rpx;}}}.liclass {width: 710rpx;height: 60rpx;margin-top: 24rpx;margin-left: 20rpx;display: flex;justify-content: space-between;}.liclass text {font-size: 30rpx;color:#111111 ;line-height: 60rpx;margin-left: 12rpx;font-weight:bold;}#empty {color: #808080;font-size: 30rpx;padding: 20rpx;}#picture {width: 30rpx;height: 30rpx;position: absolute;left: 610rpx;top: 142rpx;}.song-search-block {position: relative;width: 100%;height: 104rpx;padding: 20rpx 24rpx;background-color: #ffffff;.song-search {padding-right: 64rpx;position: absolute;top: 20rpx;left: 24rpx;right: 24rpx;height: 64rpx;line-height: 64rpx;border-radius: 32rpx;background-color: #ededed;font-size: 32rpx;padding-left: 68rpx;input {height: 64rpx;line-height: 64rpx;font-size: 32rpx;color: #000000;}.song-search-holder {color: #bababa;}image {position: absolute;top: 8rpx;left: 10rpx;width: 48rpx;height: 48rpx;padding: 5rpx;box-sizing: border-box;filter: grayscale(100%);} }}.song-list {.song-item {position: relative;height: 200rpx;box-sizing: border-box;padding: 30rpx 200rpx 30rpx 204rpx;.song-item-cover {position: absolute;top: 20rpx;left: 24rpx;width: 160rpx;height: 160rpx;border-radius: 12rpx;}.song-item-title {height: 44rpx;line-height: 44rpx;margin-bottom: 8rpx;font-size: 32rpx;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.song-item-singer {height: 40rpx;line-height: 40rpx;margin-bottom: 8rpx;font-size: 28rpx;color: #939393;}.song-item-draws {position: relative;height: 40rpx;line-height: 40rpx;font-size: 28rpx;color: #888888;padding-left: 32rpx;box-sizing: border-box;image {position: absolute;top: 6rpx;left: 0;width: 22rpx;height: 28rpx;}}.song-item-btn {position: absolute;top: 50%;right: 24rpx;width: 170rpx;height: 70rpx;line-height: 70rpx;color: #ffffff;font-size: 32rpx;text-align: center;border-radius: 35rpx;background-color: #ff0000;transform: translateY(-50%);}}}
</style>

uni-app开发小程序中的历史记录相关推荐

使用TS开发小程序中遇到的问题
在使用ts开发小程序的过程中,遇到了一些开发工具和关于ts的使用上的一些问题,并记录解决方法 1. ts开发过程中类型指定问题 Type 'number | undefined' is not ass ...
打车app开发小程序软件定制需要这6个流程
说起打车APP开发的兴起,不得不谈最近的滴滴事件,也让这个昔日打车霸主逐渐没落,令人唏嘘不已.随即而来的是各个打车app之间的无烟战场,希望能抢占滴滴所空出的市场份额.在我们的日常生活中,网约车似乎已 ...
求职兼职招聘类APP开发小程序开发的一些创新功能
企业的发展需要人才,求职者也是需要施展才华的平台,为实现两者之间更好的沟通交流需求,类似智能招聘APP软件这些平台就出现在现在移动互联网时代中.智能招聘APP开发可以更好地促进就业信息需求畅通,为就业 ...
uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
快手小店电脑版_微信PC版更新！支持在小程序中使用微信支付 | 一周资讯
小程序1. 微信PC版更新,支持在小程序中使用微信支付.12月19日,微信PC端推出内测版2.7.2.73,新版本支持以下新功能:新增看一看精选内容,新的订阅号浏览体验,支持在小程序中使用微信支付.( ...
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie 1-使用npm install axios;命令安装axios 2-新建一个文件夹再建一个.js后缀文件 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
小程序中里的bindinput_云开发实战分享|诗和远方：旅行小账本云开发
原创:豪豪前言最近沉迷小程序开发,发现了一款功能.界面.体验俱佳的小程序"旅行小账本".着手做了个简约版--"旅行小账本".效果比较满意,毕竟前后台一人单干 ...
uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...

uni-app开发小程序中的历史记录

uni-app开发小程序中的历史记录相关推荐

最新文章

热门文章