文件路径: E:/homework/uniappv3tswallpaper/components/custom-nav-bar/custom-nav-bar.vue
增加跳转到搜索页面的 navigator
。
<template>
<view class="layout">
<view class="navbar">
<view class="statusBar" :style="{height:getStatusBarHeight() + 'px'}"> </view>
<view class="titleBar" :style="{height: getTitleBarHeight() + 'px'}">
<view class="title">
{{title}}
</view>
<navigator url="/pages/search/search">
<view class="search">
<uni-icons type="search" color="#888" size="18"></uni-icons>
<text>搜索</text>
</view>
</navigator>
</view>
</view>
<view class="fill" :style="{height:getNavBarHeight() + 'px'}">
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import {
getStatusBarHeight,
getTitleBarHeight,
getNavBarHeight
} from '@/utils/system.js'
defineProps({
title: {
type: String,
default: "壁纸"
}
})
</script>
<style lang="scss" scoped>
.layout {
.navbar {
position: fixed;
padding-left: 30rpx;
top: 0%;
width: 100%;
z-index: 10;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), white 400rpx),
linear-gradient(to right, #A6E3D7 30%, #FFE1F2);
.titleBar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.title {
font-weight: 700;
font-size: 44rpx;
color: $text-font-color-1;
}
.search {
width: 220rpx;
height: 50rpx;
border-radius: 60rpx;
background: rgba(255, 255, 255, 0.4);
margin-left: 30rpx;
color: #999;
font-size: 28rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
text {
padding-left: 10rpx;
}
}
}
}
}
</style>
文件路径: E:/homework/uniappv3tswallpaper/pages/search/search.vue
使用了 uni-search-bar
组件。
将搜索组件的value值绑定,存入搜索历史数组中,存入本地存储中。
<template>
<view class="searchLayout">
<view class="search">
<uni-search-bar @confirm="onSearch" @cancel="onClear" @clear="onClear" focus placeholder="搜索"
v-model="queryParams.keyword">
</uni-search-bar>
</view>
<view>
<view class="history" v-if="historySearch.length">
<view class="topTitle">
<view class="text">最近搜索</view>
<view class="icon" @click="removeHistory">
<uni-icons type="trash" size="25"></uni-icons>
</view>
</view>
<view class="tabs">
<view class="tab" v-for="tab in historySearch" :key="tab" @click="clickTab(tab)">{{tab}}</view>
</view>
</view>
<view class="recommend">
<view class="topTitle">
<view class="text">热门搜索</view>
</view>
<view class="tabs">
<view class="tab" v-for="tab in recommendList" :key="tab" @click="clickTab(tab)">{{tab}}</view>
</view>
</view>
</view>
<view class="noSearch">
<uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
</view>
<view>
<view class="list">
<navigator :url="`/pages/preview/preview`" class="item" v-for="item in classList" :key="item._id">
<image :src="item.smallPicurl" mode="aspectFill"></image>
</navigator>
</view>
<view v-if="noData || classList.length"><uni-load-more :status="noData?'noMore':'loading'" /></view>
</view>
</view>
</template>
<script setup>
import {
ref
} from "vue";
import {
onLoad,
onUnload,
onReachBottom
} from "@dcloudio/uni-app";
//查询参数
const queryParams = ref({
pageNum: 1,
pageSize: 12,
keyword: ""
})
//搜索历史词
const historySearch = ref(uni.getStorageSync("historySearch") || []);
//热门搜索词
const recommendList = ref(["美女", "帅哥", "宠物", "卡通"]);
//没有更多
const noData = ref(false);
//没有搜索结果
const noSearch = ref(false);
//搜索结果列表
const classList = ref([{
_id: 123123,
smallPicurl: 'https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20231102/1698905562410_0_small.webp'
}]);
//点击搜索
const onSearch = () => {
historySearch.value = [...new Set([queryParams.value.keyword, ...historySearch.value])]
uni.setStorageSync("historySearch", historySearch.value)
console.log(queryParams.value.keyword)
}
//点击清除按钮
const onClear = () => {
}
//点击标签进行搜索
const clickTab = (value) => {
queryParams.value.keyword = value
}
//点击清空搜索记录
const removeHistory = () => {
uni.showModal({
title: "是否清空历史搜索?",
success: res => {
if (res.confirm) {
uni.removeStorageSync("historySearch")
historySearch.value = []
}
}
})
}
//触底加载更多
onReachBottom(() => {
})
//关闭有页面
onUnload(() => {
})
</script>
<style lang="scss" scoped>
.searchLayout {
.search {
padding: 0 10rpx;
}
.topTitle {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
color: #999;
}
.history {
padding: 30rpx;
}
.recommend {
padding: 30rpx;
}
.tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-top: 20rpx;
.tab {
background: #F4F4F4;
font-size: 28rpx;
color: #333;
padding: 10rpx 28rpx;
border-radius: 50rpx;
margin-right: 20rpx;
margin-top: 20rpx;
}
}
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5rpx;
padding: 20rpx 5rpx;
.item {
height: 440rpx;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
}
</style>