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

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

设计中会使用到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-actionbind: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的值，令搜索框由不可见转化为可见。

效果图：

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