准备
直接进入主题!!!
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.达到页面加载时,显示原先的搜索记录
数据缓存查看
清空搜索记录
给清空记录的元素绑定事件,当点击时,将data中的history的数据清空,同时防止下次页面加载值,从缓存中将值恢复过来,我们要将缓存清空-uni.removeStorageSync('history')
通过上面的步骤,一个简单搜索框布局和功能就完成了!
最后感谢这次来自知了堂的实训老师们,老师对这个demo从html骨架,scss/css修饰,以及功能的实现都讲解的很细致,从中我学习到了很多知识,骨架的标签使用,css布局的考量及使用以及功能实现的思路.希望这次实训,我们都收获满满.