小程序vant weapp 封装下拉分类搜索框

akko_

已于 2023-03-31 11:15:38 修改

阅读量1.2k

点赞数

分类专栏：小程序文章标签：小程序 javascript 开发语言

于 2023-03-31 11:03:06 首次发布

本文链接：https://blog.csdn.net/qq_29523089/article/details/129875031

版权

小程序专栏收录该内容

13 篇文章 2 订阅

订阅专栏

小程序vant weapp 封装下拉分类搜索框

导入用到的vant组件 `index.json`:

  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "@vant/weapp/dropdown-item/index"
  },

编写页面 `index.wxml`:

<van-search shape="round" model:value="{{ value }}" bind:search="onSearch" placeholder="请输入搜索内容">
    <view class="label" slot="label">
        <van-dropdown-menu custom-class="menu">
            <van-dropdown-item model:value="{{ type }}" options="{{ option }}" />
        </van-dropdown-menu>
    </view>
</van-search>

设置样式 `index.scss`:

.label {
  display: flex;
  align-items: center;
  position: relative;

  .menu {
    box-shadow: none !important;
    background-color: transparent !important;
    height: var(--cell-line-height, 24px) !important;
  }
}