如何从零开发微信小程序搜索组件（如何从零开发微信小程序搜索组件信息）

如何从零开发微信小程序搜索组件（如何从零开发微信小程序搜索组件信息）

本篇文章介绍了从零开发一个微信小程序搜索组件的方法，希望对学习微信小程序开发的朋友有帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

如何从零开发微信小程序搜索组件

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

搜索-

组件样式（推荐学习：小程序开发）

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;}-

组件功能

组件的构造器中要注意区分 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）按回车搜索——清除按钮隐藏。

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

-

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

页面 json

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

{ usingComponents:{ ck-input:/components/search/index }}-

页面 wxml

-

页面 js

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

至此，搜索组件已完成初步开发。

PHP中文网，大量jquery视频教程，欢迎学习！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。