Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to realize the search component of the gourmet recipe class WeChat Mini Programs. The content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe that after reading this gourmet recipe class WeChat Mini Programs search component how to achieve the article will have a harvest, let's take a look.

1 component structure

Set up a container for the component, placing search icons, input boxes, clear text buttons, and search buttons in the container.

Search for 2 component Styl

Container: height 100rpx, background color # eee,flex layout.

Input-wrapper: height 80 rpx, background color # fff,flex layout, border-radius: 20rpx.

Search-icon: width and height 32 rpx.

Input: font and cursor color # 000, font size 32 rpx.

Close-icon-wrapper: width and height 80 rpx, absolute positioning.

Text: search button 110 rpx wide, 65 rpx high, absolute positioning, left border 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 component function 1. Attribute distinction

In the constructor of the component, we should pay attention to distinguish the external properties of the write component in properties and data,properties, and write the internal properties of the component in data. In this search component, placeholder and value come from the page, so they are written in properties, and the showCloseIcon that controls whether the clear button appears is written in data.

Properties: {placeholder: {type: String, value: 'search' / / if the page does not pass placeholder, it displays "search"}, inputValue: {type: String}}, data: {showCloseIcon: false,}, 2. Method to set the event flow

(1) the cursor is not focused and there is no input-the search icon, placeholder, and search button are displayed.

(2) the cursor is focused without any input-the cursor flashes, showing the search icon, placeholder, and search button.

(3) the cursor is focused, the input-cursor flashes, and the search icon, input text, clear button and search button are displayed.

(4) the cursor is not focused, there is input-display search icon, input text, clear button and search button.

(5) Press enter search-clear button to hide.

(6) Click the search button-clear button to hide.

Thus it can be seen that the focus of the input component and keyboard input events are required.

InputFocused: if there is something in the input box when focusing, the closeIcon is displayed

HandleInput: if there is no content when typing, do not display closeIcon, there is content, display closeIcon and store the value in value.

HandleSearch: after clicking enter, closeIcon is not displayed.

TriggerEvent: when a custom component triggers an event, you need to use the triggerEvent method to specify the event name, detail object, and event options.

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 () {/ / Click enter on the keyboard, and call this method this.setData ({showCloseIcon: false,}) Console.log ('handleSearch', this.data.inputValue);}, search

Add click events for closeIcon and search buttons, respectively.

ClearValue () {this.triggerEvent ('handleInput', {value:'}); this.setData ({showCloseIcon: false,});}, onTap () {this.setData ({showCloseIcon: false,}) Console.log ('onTap', this.data.inputValue);}, component json {"component": true} page json

The name of the project is cookbook, where the component prefix is ck.

{"usingComponents": {"ck-input": "/ components/search/index"} page wxml page jshandleInput (e) {this.setData ({inputValue: e.detail.value,});}, this is the end of the article on "how to implement the search component of WeChat Mini Programs in gourmet recipes". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to realize the search component of WeChat Mini Programs, a gourmet menu". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.