小程序按学号或姓名查询

WeUI搜索框组件使用详解

最新推荐文章于 2024-08-29 14:46:51 发布

原创最新推荐文章于 2024-08-29 14:46:51 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍了WeUI框架中搜索框组件的使用方法，包括如何显示输入框、隐藏输入框以及输入框内容变化时的事件绑定。通过具体代码示例展示了如何设置和调整这些功能。

搜索框

<view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入学号或者拼音" value="{{condition}}" focus="{{inputShowed}}" bindinput="inputTyping" />                  
                </view>
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">搜索</view>
        </view>

js代码

 showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    page = 1;
    isfinish = false;
    this.setData({ student: [], inputShowed: true });

    loadmore(this);
  },

  inputTyping: function (e) {
    this.setData({
      condition: e.detail.value
    });
  }