小程序中如何实现搜索框样式

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

大家好，我是雄雄。

最近我们一直在搞小程序，以前的时候都没做过小程序，总看到张三也做小程序，李四也做小程序，就觉得很牛，这次我们项目上也需要个小程序，在招个团队去做的话，不合适，怎么办，只能自己学的做，纯原生的去写，包括连接蓝牙等，都是一步一步查看官方文档写出来的。反正吧，也是费了不少精力，但是确实学到的东西也不少。遇到的问题也记录记录，方便以后查看。

今天，给大家看看在如何在小程序中实现搜索的样式。

首先我们可以先看看效果图是啥样的：

其实这种不管在app中还是小程序中，都是比较常见的，搜了下，好像有组件可以直接实现这个功能，就去找了找。

小程序里面用的组件是vant-weapp,所以需要在使用之前，需要引入vant-weapp的依赖，引入依赖的方法：小程序中安装@vant依赖

其次，我们需要找到小程序的index.json文件，在里面加上下面代码：

 "van-search": "/miniprogram_npm/@vant/weapp/search/index"

在index.wxml文件中写代码：

 <view class="search_view">
    <van-search
            bind:search="selectMember"
            value="{{ value }}"
            shape="round"
            background="#ffffff"
            placeholder="请输入搜索关键词"
    />
  </view>

怎么实现？当用户输入信息，点击键盘中的搜索按钮时触发搜索事件呢，我们需要写bind:search事件的方法，我上面的是selectMember,所以需要实现这个方法： 在index.js文件中实现该方法：

 /*店员搜索居民*/
    selectMember(event){
        console.log("输入框里面输入的值是：",event.detail);
    }

这样，我们就可以实现搜索的功能了。大家可以看看你的是否可以使用？