小程序搜索组件

组件component下

wmxl

<!-- components/search/search.wxml -->
<view class="search_container">
    <view class="search_header">
        <image src="search.png" class="search_icon"></image>
        <input class="search_word" placeholder="搜索" placeholder-style='font-size:26rpx;line-height:26rpx;' bindinput="search" maxlength="15" bindconfirm="certain"></input>
    </view>
</view>

js

// components/search/search.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    datas: String
  },

  /**
   * 组件的初始数据
   */

  data: {
    search_value: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    search(e) {
      this.search_value = e.detail.value
    },
    certain(e) {
      let send_value = this.search_value
      this.triggerEvent('sendvalue', { send_value }, {
      })
    }
  }
})

wxss

.search_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: rgba(240, 240, 240, 1);
}

.search_header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 690rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 30px;
}

.search_word {
    margin-top: 5rpx;
    width: 600rpx;
    height: 26rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(117, 117, 117, 1);
}

.search_icon {
    margin-left: 20rpx;
    margin-right: 10rpx;
    width: 33rpx;
    height: 33rpx;
}

 

搜索图标自己添加到组件里

食用方法

在需要页面的json导入

{
  "usingComponents": {
    "v-search": "../../components/search/search",
  }
}

页面的wxml

<v-search bind:sendvalue="search_value"></v-search>

js里拿到组件值

search_value(e){

    var name = e.detail.send_value;

  }