完整代码:
<template>
<view>
<Lines />
<view class="search-item">
<view class="search-title">
<view class="f-colo">
最近搜索
</view>
<view class="iconfont icon-lajitong">
</view>
</view>
<view>
<view class="search-name f-colo">
四件套
</view>
<view class="search-name f-colo">
内衣
</view>
</view>
</view>
<view class="search-item">
<view class="search-title">
<view class="f-colo">
热门搜索
</view>
</view>
<view>
<view class="search-name f-colo">
四件套
</view>
<view class="search-name f-colo">
内衣
</view>
</view>
</view>
</view>
</template>
<script>
import Lines from "@/components/common/lines.vue"
export default {
data() {
return {
keyword: ''
}
},
// 标题栏右侧 搜索按钮点击
onNavigationBarButtonTap() {
this.search()
},
// 监听input输入内容的
onNavigationBarSearchInputChanged(e) {
this.keyword = e.text
},
// 监听软键盘上搜索按钮的
onNavigationBarSearchInputConfirmed(e){
this.search()
},
components: {
Lines
},
methods: {
// 判断关键词是否为空
search(){
if(this.keyword === ""){
return uni.showToast({
title:'关键词不能为空',
icon:"none"
})
}else{
uni.navigateTo({
url: '../search-list/search-list'
})
}
// 隐藏软键盘
uni.hideKeyboard();
}
}
}
</script>
<style>
.search-item {
margin: 20rpx;
}
.search-title {
display: flex;
justify-content: space-between;
}
.search-name {
padding: 4rpx 24rpx;
background-color: #E1E1E1;
display: inline-block;
border-radius: 26rpx;
margin: 10rpx;
}
</style>