一、配置分包
可以优化性能，分包存放的一般都是商品页之类的子页面
在pages.json页面配置，和“pages”同级，写以下代码，“pages”的内容会自动生成
"subPackages":[
{
"root":"subpkg",
"pages":[
。。。
]
}
] 
二、搜索页面
在subpkg创建新的页面goods-search
2.1页面跳转：
在添加一个方法：
//点击搜索框跳转到搜索页面
goToSearch:function(){
uni.navigateTo({
url:'/subpkg/goods-search/goods-search'
})
}现在点击搜索框可以进行跳转
2.2搜索页面布局
头部搜索框：
页面布局：
<view class="search-container">
<uni-search-bar @input="input" :radius="20" bgColor="#F7F7F7" cancelButton="none"></uni-search-bar>
</view>页面样式：
.search-container{
width: 100%;
}绑定事件：
<script>
export default {
data() {
return {
// 初始化定时器为空
time:null,
// 用户输入的关键词
keyword:'',
};
},
methods:{
//用户输入时可以获取用户输入的内容
input:function(e){
//每次使用先清空定时器，优化
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
this.keyword=e
//获取搜索数据
this.getSearchContent()
},500)
console.log(e)
},
}
}
</script>搜索时：
页面布局：
<!-- 搜索列表 -->
<view class="search-list" v-for="(searchItem,searchIndex) in searchList" :key="searchIndex">
<uni-icons type="search" size="18" color="#C0C0C0"/>
<view class="search-item" >
{{searchItem.word}}
</view>
</view>页面样式：
.search-list{
width: 100%;
height: 80rpx;
line-height: 80rpx;
display: flex;
border-bottom: 1px solid #eee;
uni-icons{
margin:0 20rpx;
}
}绑定事件：
<script>
export default {
data() {
return {
// 初始化定时器为空
time:null,
// 用户输入的关键词
keyword:'',
//搜索数据的数组初始化
searchList:[]
};
},
methods:{
//用户输入时可以获取用户输入的内容
input:function(e){
//每次使用先清空定时器，优化
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
this.keyword=e
//获取搜索数据
this.getSearchContent()
},500)
console.log(e)
},
//获取搜索列表的方法
async getSearchContent(){
if(this.keyword.length==0){
this.searchList=[];
return
}else{
const res=await uni.$http.get('/search')
const {data,status}=res.data;
if(status!=200){
alert('获取数据失败')
}else{
this.searchList=data
}
}
}
}
}
</script>搜索历史
页面布局：
<!-- 搜索历史 -->
<view class="history" v-model="his">
<view class="history-title">
<text>历史搜索</text>
<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
</view>
<view class="history-content" v-if="historyList.length!=0">
<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
{{historyItem}}
</view>
</view>
<view class="history-none" v-else>
<text>无搜索历史</text>
</view>
</view>页面样式：
.history{
.history-title{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
text{
font-weight: bold;
font-size: 34rpx;
}
}
.history-content{
width: 90%;
margin: 10rpx auto;
display: flex;
flex-wrap: wrap;
.history-item{
height: 50rpx;
line-height: 50rpx;
background-color: #F8F8F8;
margin-top: 10rpx;
margin-right: 20rpx;
padding:0 20rpx;
border-radius: 20rpx;
}
}
.history-none{
width: 100%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
}
}思路解析：
这是没有搜索历史时的界面，在搜索框搜索后数据进行本地缓存，存储到定义的空数组中
点击右边的垃圾桶会变成现在的样子
这是有搜索过的样子，会有之前搜索过的关键词
需要知道如下两点：
1.新搜索的内容展示在前边
2.如果输入重复的内容，只显示一个就好
搜索发现
与搜索历史相同
整体代码
<template>
<view class="search">
<view class="search-container">
<uni-search-bar @input="input" :radius="20" bgColor="#F7F7F7" cancelButton="none"></uni-search-bar>
</view>
<!-- 搜索列表 -->
<view v-if="searchList.length!=0">
<view class="search-list" v-for="(searchItem,searchIndex) in searchList" :key="searchIndex" >
<uni-icons type="search" size="18" color="#C0C0C0"/>
<view class="search-item" >
{{searchItem.word}}
</view>
</view>
</view>
<view v-else>
<!-- 搜索历史 -->
<view class="history" v-model="his">
<view class="history-title">
<text>历史搜索</text>
<uni-icons type="trash" size="20" color="#C0C0C0" @click="clearHistory"></uni-icons>
</view>
<view class="history-content" v-if="historyList.length!=0">
<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
{{historyItem}}
</view>
</view>
<view class="history-none" v-else>
<text>无搜索历史</text>
</view>
</view>
<!-- 搜索发现 -->
<view class="found">
<view class="found-title">
<text>搜索发现</text>
<uni-icons type="" size="20" color="#C0C0C0"></uni-icons>
</view>
<view class="found-content">
<view class="found-item" v-for="(foundItem,foundIndex) in foundList" :key="foundIndex">
{{foundItem}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 初始化定时器为空
time:null,
// 用户输入的关键词
keyword:'',
//搜索数据的数组初始化
searchList:[],
//搜索历史初始化
historyList:[],
// 初始化搜索发现列表
foundList:['零食','平衡车','行李箱','小白鞋','毛绒玩具','连衣裙','充电宝']
};
},
methods:{
//用户输入时可以获取用户输入的内容
input:function(e){
//每次使用先清空定时器，优化
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
this.keyword=e
//获取搜索数据
this.getSearchContent()
},500)
console.log(e)
},
//获取搜索列表的方法
async getSearchContent(){
if(this.keyword.length==0){
this.searchList=[];
return
}else{
const res=await uni.$http.get('/search')
const {data,status}=res.data;
if(status!=200){
alert('获取数据失败')
}else{
this.searchList=data
//把搜索的关键字保存到historyList中
this.saveHistory()
}
}
},
// 保存历史记录
saveHistory(){
if(this.historyList.indexOf(this.keyword)==-1){
this.historyList.unshift(this.keyword)
// 把用户输入的内容保存到历史记录当中
uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
}
},
// 清空历史记录
clearHistory(){
this.historyList=[]
uni.setStorageSync('kw','[]')
if(his.length==0){
this.his=!this.his
}
}
},
onLoad() {
// 从缓存中读取历史记录
this.historyList=JSON.parse(uni.getStorageSync('kw'))
}
}
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
}
.search{
width: 100%;
height: 100vh;
background-color: #FFF;
.search-container{
width: 100%;
}
.search-list{
width: 100%;
height: 80rpx;
line-height: 80rpx;
display: flex;
border-bottom: 1px solid #eee;
uni-icons{
margin:0 20rpx;
}
}
.history{
.history-title{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
text{
font-weight: bold;
font-size: 34rpx;
}
}
.history-content{
width: 90%;
margin: 10rpx auto;
display: flex;
flex-wrap: wrap;
.history-item{
height: 50rpx;
line-height: 50rpx;
background-color: #F8F8F8;
margin-top: 10rpx;
margin-right: 20rpx;
padding:0 20rpx;
border-radius: 20rpx;
}
}
.history-none{
width: 100%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
}
}
.found{
margin-top: 50rpx;
.found-title{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
text{
font-weight: bold;
font-size: 34rpx;
}
}
.found-content{
width: 90%;
margin: 10rpx auto;
display: flex;
flex-wrap: wrap;
.found-item{
height: 50rpx;
line-height: 50rpx;
background-color: #F8F8F8;
margin-top: 10rpx;
margin-right: 20rpx;
padding:0 20rpx;
border-radius: 20rpx;
}
}
}
}
</style>
最终效果图
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
