uni

您所在的位置：网站首页 › 淘宝搜索栏自动显示的推荐词怎么来的 › uni

uni

#uni| 来源: 网络整理| 查看: 265

一、配置分包

可以优化性能，分包存放的一般都是商品页之类的子页面

在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搜索页面布局

头部搜索框：

页面布局：

页面样式：

.search-container{ width: 100%; }

绑定事件：

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) }, } } 搜索时：

页面布局：

页面样式：

.search-list{ width: 100%; height: 80rpx; line-height: 80rpx; display: flex; border-bottom: 1px solid #eee; uni-icons{ margin:0 20rpx; } }

绑定事件：

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 } } } } } 搜索历史

页面布局：

历史搜索 {{historyItem}} 无搜索历史

页面样式：

.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.如果输入重复的内容，只显示一个就好

搜索发现

与搜索历史相同

整体代码 {{searchItem.word}} 历史搜索 {{historyItem}} 无搜索历史搜索发现 {{foundItem}} 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')) } } *{ 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; } } } } 最终效果图

【本文地址】

uni

uni

今日新闻

推荐新闻