美食菜谱类微信小程序的设计与开发之搜索组件

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈美食菜谱类微信小程序的设计与开发之搜索组件。

最新消息， 近日，京东开普勒开放平台针对微信小程序开发上线了一个新功能，小程序挂件可实现小程序之间的无缝跳转，这种新式互跳功能有什么用呢。

美食菜谱类小程序非常受到微信小程序开发的欢迎，因为小程序的用完即走，轻便无需下载，随时可以在小程序中搜索不知道的菜谱，比如下厨房也开发了对于的美食菜谱小程序，那么关于美食菜谱了类小程序要如何设计开发，首先我们先讲讲美食菜谱小程序中最重要的搜索组件。

为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。

搜索2组件样式

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。

.container {background: #eee;height: 100rpx;width: 100%;display: flex;justify-content: center;align-items: center;}.input-wrapper {display: flex;align-items: center;height: 80rpx;width: 80%;background: #fff;border-radius: 20rpx;}.input-wrapper .search-icon {margin-left: 20rpx;width: 32rpx;height: 32rpx;}.input-wrapper input {margin-left: 10rpx;color: #000;font-size: 32rpx;caret-color: #000;width: 60%;}.input-wrapper .close-icon-wrapper{position: absolute;left: 480rpx;width: 80rpx;height: 80rpx;background:#fff;display: flex;justify-content: center;align-items: center;}.input-wrapper .close-icon {width: 42rpx;height: 42rpx;}.input-wrapper text {position: absolute;right: 80rpx;width: 110rpx;height: 65rpx;padding: 0;background: #fff;display: flex;justify-content: center;align-items: center;font-size: 32rpx;border-left: 2rpx solid #eee;}3组件功能1. 属性区分

组件的构造器中要注意区分 properties 和 data，properties 中写组件的对外属性，data 写组件的对内属性。在本搜索组件中 placeholder 和 value 从页面传来，所以它们写在 properties 中，控制清除按钮是否出现的 showCloseIcon 要写在 data 中。

properties: {placeholder: {type: String,value: '搜索' // 如果页面不传placeholder，显示“搜索”},inputValue: {type: String}},data: {showCloseIcon: false,},2.方法设置事件流程

（1）光标不聚焦，没有任何输入——显示搜索图标、placeholder和搜索按钮。

（2）光标聚焦，没有任何输入——光标闪烁，显示搜索图标、placeholder和搜索按钮。

（3）光标聚焦，有输入——光标闪烁，显示搜索图标、输入文字、清除按钮和搜索按钮。

（4）光标不聚焦，有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。

（5）按回车搜索——清除按钮隐藏。

（6）点击搜索按钮——清除按钮隐藏。

由此可见，需要 input 组件的聚焦和键盘输入事件。

inputFocused：如果聚焦时，输入框中有内容，显示 closeIcon；

handleInput：如果输入时没有内容，不显示 closeIcon，有内容，显示 closeIcon 并把值存入 value。

handleSearch：点击回车后，不显示 closeIcon。

triggerEvent：自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。

inputFocused(e) {if (e.detail.value !== '') {this.setData({showCloseIcon: true,});}},handleInput(e) {if (e.detail.value == '') {this.setData({showCloseIcon: false,});} else {this.setData({showCloseIcon: true,});this.triggerEvent('handleInput',{value: e.detail.value});}},handleSearch() { // 点击键盘上的回车，调用此方法this.setData({showCloseIcon: false,});console.log('handleSearch',this.data.inputValue);},

搜索

分别为 closeIcon 和 搜索按钮添加点击事件。

clearValue() {this.triggerEvent('handleInput',{value: ''});this.setData({showCloseIcon: false,});},onTap() {this.setData({showCloseIcon: false,});console.log('onTap',组件 json

{"component":true}页面 json

工程的名字是 cookbook，这里组件前缀统一为 ck。

{"usingComponents":{"ck-input":"/components/search/index"}}页面 wxml

页面 js

handleInput(e) {this.setData({inputValue: e.detail.value,

以上就是美食菜谱类微信小程序的设计与开发之搜索组件，美食餐饮类目前已经成为了小程序开发中的热门行业，如果你也需要这样的一个小程序，可以与我们咨询。

惠民小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!