一、配置分包

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

在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>

最终效果图

uni-app（搜索页面）相关推荐

smobiler仿京东app搜索页面
京东app搜索界面如下图所示: 完整代码见git :https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_Smob ...
smobiler仿饿了么app搜索页面
饿了么-搜索页面如下图所示: 完整代码见git :https://github.com/comsmobiler/BlogsCode 创建窗体创建一个smobilerForm ,文件名设置ElmSea ...
APP设计|搜索页面设计灵感
用户进行搜索的首要目的就是:快速找到自己想要的结果!搜索页面是用户进行搜索的第一站,最理想的状态就是用户不用打字就能够进行搜索,所以搜索页承担着增强用户搜索效率的作用. 搜索几乎是现在所有APP的标配 ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni app input添加获取验证码按钮_FILEX | 如何在UniSwap挖到UNI？
终于,UniSwap的币上线了,不过这一次不是直接通过挖矿获得,而是先给所有此前参加过UniSwap流动性挖矿和交易的用户分发了红利. 其中最少的账户拿到400个UNI左右,而提供流动性的账户获得的U ...
苹果和谷歌应用商店的APP搜索排名算法
谷歌和苹果应用商店各自都有几百万的APP!这么多的App让很多软件产品开发商"脑壳疼":自己的App进店后能有人找到吗?能有用户吗? 67%的人到应用商店后,都是自己搜索关键词找到 ...
【愚公系列】2022年11月 uniapp专题-优购电商-搜索页面
文章目录前言一.搜索页面 1.自定义搜索栏 2.自定义搜索页面前言搜索功能在电商领域是非常常见的一个功能具体表现在两个方面: 对用户来说,生鲜电商类的搜索功能通常是用来解决"快速找到 ...

uni-app（搜索页面）

一、配置分包

二、搜索页面

2.1页面跳转：

2.2搜索页面布局

头部搜索框：

搜索时：

搜索历史

搜索发现

整体代码

最终效果图

uni-app（搜索页面）相关推荐

最新文章

热门文章