微信小程序搜索框组件之SearchBar

╰半橙微兮° 2021-10-19 07:31 1142阅读 0赞

index.wxml

<view class="wrapper">
    
      <slot></slot>
        <view class='tit_seabox'>
            <view class="tit_seabox_bar {
       {addflag?'tit_seabox_add':''}} {
       {searchflag?'tit_start_search':''}}">
                <icon type='search' size="32rpx"></icon>
                <input type="text" bindinput="searchList" bindconfirm="endsearchList" bindfocus='getfocus' bindblur="blursearch" confirm-type='search' value='{
       {searchstr}}' placeholder='请输入...' />
                <icon bindtap='activity_clear' wx:if="{
       {searchflag}}" type='clear' size="28rpx"></icon>
            
            </view>
            <view wx:if="{
       {searchflag}}" bindtap='cancelsearch' class="activity_seabtn">取消</view>
            <view class='activity_add' wx:if="{
       {addflag}}"><image bindtap='addhandle' src='{
       {addimg}}'></image></view>
        </view>
       
    </view>

index.js

// 本组件为搜索组件
    // 需要传入addflag   值为true / false （搜索框右侧部分）
    // 若显示搜索框右侧部分   需传入右侧图标url以及addhandle函数
    
    Component({
    
      properties: {
    
        addflag: {    //显示搜索框右侧部分
          type: Boolean,
          value: false,
          observer(newVal, oldVal, changedPath) {
    
          }
        },
        addimg: {       //显示搜索框右侧部分icon
          type: String,
          value: ''
        },
        searchstr: {     //input  值
          type: String,
          value: '值'
        },
        searchflag: {
          type: Boolean,
          value: false,
        }
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
    
       */
      methods: {
    
        //获得焦点
        getfocus() {
          this.setData({
            searchflag: true,
          })
        },
        //搜索框右侧按钮事件
        addhandle() {
          this.triggerEvent("addhandle");
        },
        //搜索输入
        searchList(e) {
          this.triggerEvent("searchList", e);
        },
        //查询
        endsearchList(e) {
    
          this.triggerEvent("endsearchList");
        },
        //失去焦点
        blursearch() {
          // console.log('失去焦点')
    
        },
        // 取消
        cancelsearch() {
          this.setData({
            searchflag: false,
          })
          this.triggerEvent("cancelsearch");
        },
        //清空搜索框
        activity_clear(e) {
    
          this.triggerEvent("activity_clear");
        },
    
      }
    })

index.wxss

.tit_seabox{
      width: calc( 100% - 64rpx );
      background: #e5e5e5;
      height: 60rpx;
      padding:20rpx 32rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .tit_seabox_bar{
        width: calc( 100% - 32rpx );
        height: 60rpx;
        display: flex;
        align-items: center;
        border-radius: 13rpx;
        background: #ffffff;
        padding-left: 32rpx;
    }
    /*有权限添加活动*/
    .tit_seabox_bar.tit_seabox_add{
      width:calc( 100% - 122rpx );
    }
    /*开始搜索时*/
    .tit_seabox_bar.tit_start_search{
      width: calc( 100% - 102rpx );
    }
    /*开始搜索且有权限添加*/
    .tit_seabox_bar.tit_start_search.tit_seabox_add{
    width:calc( 100% - 192rpx );
    }
    .tit_seabox_bar icon{
      margin-right: 20rpx;
    
    }
    .tit_seabox input{
      height:60rpx;
      line-height:60rpx;
      font-size:28rpx;
      width:100%;
      margin-right:32rpx;
    
    }
    .activity_add{
      width:60rpx;
      text-align:right;
      border-left:4rpx solid #f2f2f2;
      margin-left:20rpx;
    
    }
    .activity_add image{
      width: 40rpx;
      height: 40rpx;
    }
    .activity_seabtn{
      font-size: 28rpx;
      width: 70rpx;
      text-align: right;
    }