uniapp---搜索页面的布局搭建及功能完成

原创已于 2023-04-25 22:41:27 修改 · 1.7k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#uni-app

于 2023-04-21 20:50:53 首次发布

准备

直接进入主题!!!

uniapp项目源码,下载input分支即可.

Input分支https://gitee.com/caozhaoyi/uni-app.git

相关uniapp的API及其他知识查看官方文档 ,uniapp的文档写的还看得下去,不像其他的官方文档........

uniapp官方文档https://uniapp.dcloud.net.cn/component/swiper.html

正文

效果

功能介绍

1.在搜索框中,输入数据时,旁边的取消会转变为搜索.

2.点击搜索时会将搜索框清空,并将内容展现在搜索记录中,同时将内容存储在浏览器的本地缓存中.

3.当输入的内容与搜索记录相同,不再重复展现和缓存.

4.新输入的内容会展现再搜索记录的最前面.

5.当我们退出浏览器后,我们要保留搜索记录,以便下次方便搜索.

6.点击清除数据,将搜索记录的值清空,同时将缓存的值也清空.

具体实现

页面布局

通过内边距和百分比大小以及Flex布局,对于主要的盒子元素不给定实际大小,简单实现页面适配布局.

数据展示

先将要使用的数据配置好,再用v-for将元素逐个渲染出来.搜索记录的数据展现同理.

取消和搜索的转换

通过v-model绑定输入框的值inpValue,当输入框获取焦点并输入内容时,inpValue改变,值不为空.v-if的条件不满足,显示搜索.

这里我们还可以使用v-show来判定,两者实现的效果一样,底层的运作不同.

<text class="btn" v-show="inpValue==''">取消</text>
<text class="btn" @click="search" v-show="inpValue!=''">搜索</text>

v-show与v-if区别:v-if采取的是懒加载,如果初始的条件不成立,直接跳过该组件,不会进行渲染及后续工作.v-show对于条件的成立与否,都会渲染该组件,只是条件不成立时,会将该组件的样式中的display设定为none,达到隐藏效果.

日常使用时v-if有高的切换性能的消耗,比如说,当条件成立,要重新渲染该组件,条件频繁切换时,就要重复的渲染.v-show有高的初始渲染性能消耗,比如说无论条件是否成立,组件的渲染都会再初始时完成.所以建议,组件的条件切换比较频繁时,用v-show.如果组件条件在初始化后,很少改变,用v-if.

搜索框清空和搜索记录展现和数据缓存及输入元素在前面

给搜索元素绑定点击事件并添加search处理函数,当我们输入值后,通过对先前输入的值进行数组遍历,一一比对,如果有相同的话,就去除数组中原有值,新的值放入.如果没有相同的话,将新输入的值,放在数组的首位.同时通过uni.setStorageSync('history',JSON.stringify(this.history))将输入的值以键值对的方式存储.,并将值转成JSON格式.最后,上面的事件都处理后,将输入框的值清空.

关闭浏览器后,搜索记录保留

在onload函数中,页面加载时调用uni.getStorageSync('history'),获取键值为history的数据.通过三元表达式判定,如果缓存中有对应history的数据,就将该数据转化成js对象赋值给data中的history,否则就将一个空数组赋值给data中的history.达到页面加载时,显示原先的搜索记录