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

Posted 2022-10-28 穆雄雄

大家好，我是雄雄。

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

首先先上图看看是啥样的：

小程序里面用的组件是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);