个人写法 仅供参考
HTML：
<template>
<view>
<view class="sos_box">
<view class="sos_inp"><input type="text" placeholder="搜索" v-model="Nei" @confirm="ondang()" /></view>
<view class="sos_qu">取消</view>
</view>
<view class="tu">
<image src="../../static/sosuo.png"></image>
</view>
<view class="SoS_suo">
<view class="">搜索历史</view>
<view style="border: 1px solid red; color: red; border-radius: 7rpx;" @click="dele()">X 清空全部</view>
</view>
<view class="Sos_xia">
<view v-for="(ys,index) in list " :key='index' class="xia_a">
{
{ys}}
</view>
</view>
</view>
</template>
JS：
<script>
export default {
data() {
return {
Nei: '',
list: [],
}
},
methods: {
// 键盘事件 把input框的内容获取到 然后保存到数组里 再渲染页面
// 存到本地 来达到刷新页面 数据依旧在的效果
ondang() {
console.log(this.Nei)
//unshift:跟push性质一样 区别就是将新添加的数据放在第一位
this.list.unshift(this.Nei)
// console.log(this.list)
// console.log(list)
uni.setStorage({
//本地保存
key: 'neirong',
data: JSON.stringify(this.list)//转换为字符串形式
})
},
// 清空效果
dele() {
this.list =[]
uni.removeStorage({
key: 'neirong',
success: function(res) {
uni.showToast({
title:'清空成功'
})
}
});
}
},
// 效果：添加的搜索记录保存在页面,不被刷新消失
// 1.取数据 在onLoad生命周期中取 onLoad:页面的初始化
// 2.用async await 来获取内容 因为返回的结果是个promise
// 3. 最后把结果附给数组 让数组获取到取出的值
async onLoad() {
var ges = await uni.getStorage({
key: 'neirong'
})
console.log(ges)
this.list = JSON.parse(ges[1].data)
//JSON.parse：取数据的时候再把字符串数据转换为对象
},
}
</script>
CSS：
<style scoped>
.sos_box {
width: 100%;
height: 60rpx;
display: flex;
/* background-color: #E80080; */
}
.sos_inp {
width: 80%;
height: 60rpx;
/* background-color: #0056B3; */
}
.sos_inp input {
width: 100%;
height: 50rpx;
background-color: #EEEEEE;
border-radius: 8rpx;
margin-left: 10rpx;
padding-left: 40rpx;
}
.sos_qu {
margin-left: 62rpx;
}
.tu image {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 0;
left: 10rpx;
}
.Sos_xia {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.xia_a {
border: 1px solid #9E9A95;
border-radius: 5rpx;
margin: 10rpx 20rpx;
}
.SoS_suo {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>