Table of contents
foreword
This article has more pure code, detailed explanation, and more detailed explanation will be given in the future
Show results
The saved content can be deleted by long pressing. The reasons for the length of the video are not displayed one by one. The specific effect is as follows:
Main content
Here one-adv is an encapsulated component, which improves the reuse of code, better reduces the code length, and renders the content according to the content of its own background database. The props in this are all background data transmission, so as to realize the use of this component, as follows Code Snippets and Encapsulated Codes
<template>
<view class="oneadv">
<view v-if="title" class="pl-1">{
{title}}</view>
<image v-if="cover" :src="cover" :class="isshowstyle?'getImage':''" @click="removeAll"></image>
<slot></slot>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props: {
title: {
type: String
},
cover: {
type: String
},
isshowstyle: {
type: Boolean
}
},
methods: {
removeAll(){
this.$emit('removeall')
}
}
}
</script>
<style scoped>
.oneadv {
position: relative;
}
.title {
font-size: 28rpx;
padding: 0 0 8rpx 20rpx;
}
image {
width: 750rpx;
height: 350rpx;
}
.getImage {
width:40rpx;
height:44rpx;
position: absolute;
top:0rpx;
right:40rpx;
}
</style>
This end code is to simply render the dead data written by yourself, and some basic styles to debug the reflection of the page and provide a better user experience.
<template>
<view>
<u-search placeholder="请输入搜索内容" v-model="keyword" :animation="true" @custom="custom" @change="changeinput" @blur="blurinput"></u-search>
<one-adv title="热门搜索" cover="../../pagesA/static/images/demo/demo4.jpg">
<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click.native="sumbitkey(item)"></color-tag>
</one-adv>
<divider></divider>
<one-adv title="常用分类">
<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click.native="sumbitkey(item)"></color-tag>
</one-adv>
<divider></divider>
<one-adv title="历史记录" cover="../../pagesA/static/images/demo/del.png" :isshowstyle="true" @removeall="removeAll">
<color-tag v-for="(item,index) in searchList" :key="index" :item="{name:item}" :color="false" @longpress="longpress(index)" class="position-relative" @click.native="sumbitkey(item)">
<icon type="clear" size="16" class="position-absolute icon" v-if="isshow&¤tIndex==index" @tap="removeItem(index)"/>
</color-tag>
</one-adv>
</view>
</template>
<script>
export default {
data() {
return {
keyword: '',
currentIndex:0,
isshow:false,//删除图标
searchList: [], //存储的搜索的内容
hot: [{
name: '领券中心'
},
{
name: 'Redmi K20'
},
{
name: 'RedmiBook 14'
},
{
name: '智能积木 越野四驱车'
},
{
name: '手环 腕带'
},
],
cate: [{
name: '耳机'
},
{
name: '手机'
},
{
name: '音箱'
},
{
name: '手表'
},
{
name: '配件'
},
{
name: '网关/传感器'
},
{
name: '健康'
},
{
name: '酷玩'
},
]
}
},There are a total of eight requirements to achieve a more complete search page, which are:
1. Clear the search box, use the api in the element component to achieve, delete the content of the search box, you can quickly conduct the next search
2. Click search, simply use the uniapp component to prompt, and prompt a pop-up window when no input is written. The latter function is to save the search content in the browser, and then jump to the corresponding page
3. The change of the search content is simply to control the format of the input content. The format judgment is to use regular expressions. If it is not correct, use the prompt box of uniapp to pop up the prompt.
4. Out of focus, cooperate with the search box to improve the experience of using the search box
5. Delete all, delete the content saved after the search, because it is stored in the browser, so delete the data in the browsing, you can't just delete the surface content, you need to delete the data to ensure that there will be no bugs, it is known that if Not talking about data deletion, it will be re-rendered after refreshing, which means that it is not deleted, so be sure to delete the saved data
6, 7. It is used in conjunction with a single element, and then deletes the individually selected options, so that they can be deleted individually. If you want to delete the one you want to delete, delete the search record, which will be more user-friendly.
8. Click on the search record, it will be directly rendered to the search box, so as to search the content of the history record, and improve the user experience for customers who want to search for the previous content again
mounted() {
let his = uni.getStorageSync('history_key')
this.searchList = his||[]
console.log(this.searchList);
},
methods: {
//点击清空搜索框
clear() {
this.keyword = ''
},
//点击搜索
custom(value) {
if (this.keyword == '') {
uni.showToast({
title: '搜索内容不能为空',
icon: 'none'
})
return;
} else {
let index = this.searchList.indexOf(this.keyword)
if (index === -1) {
this.searchList.unshift(this.keyword)
uni.setStorageSync('history_key', this.searchList);
} else {
this.searchList.unshift(this.searchList.splice(index, 1)[0])
uni.setStorageSync('history_key', this.searchList);
}
uni.navigateTo({
url:`../choose/choose?key=${this.keyword}`
})
}
},
//搜索内容改变
changeinput() {
var partten = /^(?!(\s+$))/; //正则表达式规则
let val = this.keyword
if (!partten.test(val)) {
uni.showToast({
title: '请不要输入空白字符',
icon: 'none'
})
return;
}
},
//失焦
blurinput() {
this.keyword = this.keyword.trim()
},
//删除所有
removeAll() {
uni.showModal({
title: '提示',
content: '您确定要删除所有历史记录吗',
success: (res)=> {
if (res.confirm) {
uni.removeStorageSync('history_key');
this.searchList = []
} else if (res.cancel) {
return;
}
}
})
},
//长按
longpress(index){
console.log(index);
this.isshow = true
this.currentIndex = index
},
//移除单个搜索记录
removeItem(i){
this.searchList.splice(i,1)
uni.setStorageSync('history_key', this.searchList);
},
//点击按钮进入搜索
sumbitkey(item){
console.log(item);
if(item.name){
this.keyword = item.name
}else {
this.keyword = item
}
}
}
}
</script>
<style scoped lang="scss">
/* sass中的样式穿透 */
/deep/ .u-search {
margin: 0 0 20rpx 0 !important;
}
.icon {
right:0;
}
</style>Closing remarks:
This content sharing ends here. More detailed functional explanations will be shown in the following articles. In order to reduce the length of the space, they will be introduced separately.
