微信小程序UI之旅：便捷的搜索框组件

最新推荐文章于 2025-07-18 18:32:05 发布

原创

最新推荐文章于 2025-07-18 18:32:05 发布 · 置顶 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #自定义组件 #ab-search-bar #search #css

前言

做小程序开发有段时间了，开发中遇到各种各样的UI需求，很多都是类似甚至重复。虽然可以使用template和include来实现代码复用，但是它们都没有逻辑处理能力，有时一些简单的逻辑，我们更加希望可以直接被模板内部实现掉，所以更好的方法是直接封装成组件，最大程度的实现代码复用。

本文及后续一系列文章将会介绍常用UI组件的封装，方便今后开发中使用，所有样式源码及示例将提交至开源项目wx-abui

搜索框组件：ab-search-bar

搜索框是常用组件之一，也是本文封装的对象。在封装时我主张对外暴露出常用的属性和方法，以便在项目中重复使用时减少对源码的修改。

github传送门：https://github.com/albert-lii/wx-abui/tree/master/widgets/ab-search-bar
demo传送门：https://github.com/albert-lii/wx-abui/tree/master/pages/mainex

样式示例

搜索框样式

自定义属性和方法

自定义属性	描述
placeholder	搜索框中的提示字
value	搜索框的内容

自定义方法	描述
bindinput	输入监听
bindclear	清除内容按钮点击监听
bindback	返回按钮点击监听
bindsearch	搜索按钮点击监听

使用示例

<view class="container">
  <!-- 搜索框 -->
  <ab-search-bar placeholder="请输入关键字" value="{
    
    {searchValue}}" bindinput="searchInput" bindsearch="searchTab" bindclear="searchClear" />
</view>

const LABEL_SOURCE = require('../../utils/label_flow_source.js');

Page({
   
   

  data: {
   
   
    searchValue: ''
  },

  /*=========================================================
   * 搜索框相关
   *=========================================================*/
  /**
   * 搜索框输入监听
   */
  searchInput: function (e) {
   
   
    console.log('searchInput >>> ' + e.detail.value);
  },
  /**
   * 搜索框清除监听
   */
  searchClear: function (e) {
   
   
    console.log('searchClear');
  },
  /**
   * 搜索框右侧按钮点击监听
   */
  searchTab: function (e) {
   
   
    let _key = e.detail.key;
    let _value = e