搜索

2022-01-14  本文已影响0人  前端许

json引入

{

  "usingComponents": {

    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",

    "van-dropdown-item": "@vant/weapp/dropdown-item/index",

    "van-cell": "@vant/weapp/cell/index",

    "van-button": "@vant/weapp/button/index",

    "van-switch": "@vant/weapp/switch/index",

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

    "van-empty": "@vant/weapp/empty/index"

  }

}

HTML部分

<view class="flex">

  <van-search value="{{ value }}" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" />

<van-dropdown-menu active-color="#1989fa">

  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" bind:change="change" data-index="{{index}}" />

  <van-dropdown-item id="item" title="{{ itemTitle }}">

    <van-cell title="{{ switchTitle1 }}">

      <van-switch slot="right-icon" size="24px" style="height: 26px" checked="{{ switch1 }}" active-color="#ee0a24" bind:change="onSwitch1Change" />

    </van-cell>

    <van-cell title="{{ switchTitle2 }}">

      <van-switch slot="right-icon" size="24px" style="height: 26px" checked="{{ switch2 }}" active-color="#ee0a24" bind:change="onSwitch2Change" />

    </van-cell>

    <van-cell title="{{ switchTitle3 }}">

      <van-switch slot="right-icon" size="24px" style="height: 26px" checked="{{ switch3 }}" active-color="#ee0a24" bind:change="onSwitch3Change" />

    </van-cell>

    <van-cell title="{{ switchTitle4 }}">

      <van-switch slot="right-icon" size="24px" style="height: 26px" checked="{{ switch4 }}" active-color="#ee0a24" bind:change="onSwitch4Change" />

    </van-cell>

    <view style="padding: 5px 16px;">

      <van-button type="danger" block round bind:click="onConfirm" data-switch1="{{switch1}}" data-switch2="{{switch2}}" data-switch3="{{switch3}}" data-switch4="{{switch4}}" data-page="{{page}}" bind:change="change">

        确认

      </van-button>

    </view>

  </van-dropdown-item>

</van-dropdown-menu>

</view>

上一篇下一篇

猜你喜欢

热点阅读