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

准备

直接进入主题!!!

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布局的考量及使用以及功能实现的思路.希望这次实训,我们都收获满满.