美食菜谱类微信小程序的搜索组件怎么实现


这篇文章主要介绍了美食菜谱类微信小程序的搜索组件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇美食菜谱类微信小程序的搜索组件怎么实现文章都会有所收获,下面我们一起来看看吧。
为组件设置一个容器,在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。
container:免费云主机域名高度 100 rpx,背景色 #eee,flex 布局。
input-wrapper:高度 80 rpx,背景色 #fff,flex 布局,border-radius: 20rpx。
search-icon:宽高 32 rpx。
input:字体和光标颜色 #000,字体大小 32 rpx。
close-icon-wrapper:宽高 80 rpx,绝对定位。
text:搜索按钮宽 110 rpx,高 65 rpx,绝对定位,左边框 2rpx solid #eee。
组件的构造器中要注意区分 properties 和 data,properties 中写组件的对外属性,data 写组件的对内属性。在本搜索组件中 placeholder 和 value 从页面传来,所以它们写在 properties 中,控制清除按钮是否出现的 showCloseIcon 要写在 data 中。
(1)光标不聚焦,没有任何输入——显示搜索图标、placeholder和搜索按钮。
(2)光标聚焦,没有任何输入——光标闪烁,显示搜索图标、placeholder和搜索按钮。
(3)光标聚焦,有输入——光标闪烁,显示搜索图标、输入文字、清除按钮和搜索按钮。
(4)光标不聚焦,有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。
(5)按回车搜索——清除按钮隐藏。
(6)点击搜索按钮——清除按钮隐藏。
由此可见,需要 input 组件的聚焦和键盘输入事件。
inputFocused:如果聚焦时,输入框中有内容,显示 closeIcon;
handleInput:如果输入时没有内容,不显示 closeIcon,有内容,显示 closeIcon 并把值存入 value。
handleSearch:点击回车后,不显示 closeIcon。
triggerEvent:自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项。
分别为 closeIcon 和 搜索按钮添加点击事件。
工程的名字是 cookbook,这里组件前缀统一为 ck。关于“美食菜谱类微信小程序的搜索组件怎么实现”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“美食菜谱类微信小程序的搜索组件怎么实现”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注百云主机行业资讯频道。

相关推荐: css中的计数器是什么

这篇文章给大家分享的是有关css中的计数器是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   css计数器是什么?   计数器是css3提供的一个强大的工具,是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/18 12:16
下一篇 01/18 12:17

相关推荐