【微信小程序】底部弹出式搜索框

微信开发者工具的准备工作详见： 【微信小程序】初始页面和导航栏。

设计中会使用到Vant Weapp组件库，添加组件库的方法参照官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库。

注意：我的组件库的引入的位置为/miniprogram，官方教程的位置可能会报错。

第一步，在页面中添加搜索按钮。

在app.json中添加，

  "usingComponents": {

  }

引入button组件和icon组件，

  "usingComponents": {
    "van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index",
    "van-icon": "/miniprogram/miniprogram_npm/@vant/weapp/icon/index",
  }

在首页的index.wxml中添加，

<!-- 搜索按钮 -->
<van-button icon="search" plain type="info" bindtap = "SearchUp"/>

bindtap后的SearchUp为点击按钮后触发的函数，用来触发下一步中的搜索框。

效果图：

第二步，添加搜索框。

在app.json的"usingComponents"中引入search组件，action-sheet组件，empty组件，

  "usingComponents": {
    "van-search": "/miniprogram/miniprogram_npm/@vant/weapp/search/index",
    "van-action-sheet": "/miniprogram/miniprogram_npm/@vant/weapp/action-sheet/index",
    "van-empty": "/miniprogram/miniprogram_npm/@vant/weapp/empty/index"
  }

在首页的index.wxml中添加，

<!-- 搜索弹窗 -->
<van-action-sheet show="{{ show }}" title=" " bind:close="onClose" bind:select="onSelect">
  <view>
    <van-search 
      value="{{ value }}"
      label="搜索"
      shape="round"
      placeholder="请输入搜索关键词"
      show-action
      bind:search="onSearch"
      bind:cancel="onCancel"
    />
    <van-empty description="搜索内容" />
  </view>
</van-action-sheet>

show后的show为数据名称，需要到app.json的Page的data下添加并定义，

  data: {
    show: false
  },

van-search组件的：

bind:search="onSearch"

bind:cancel="onCancel"

这两个函数需要到app.json的Page下定义，

  onClose() {
    this.setData({ show: false });
  },

  onSelect(event) {
    console.log(event.detail);
  },

第三步，把搜索按钮和搜索框通过函数关联起来。

在app.json的Page下定义，

  SearchUp: function(){
    this.setData({show:true})
  },

这个函数的功能是在点击搜索按钮后，改变show的值，令搜索框由不可见转化为可见。

效果图：

这是手机预览的界面，开发者工具端的界面会有变形。