小程序导入weui实现搜索栏效果————（2019.12.11学习笔记）

首先下载weui项目，项目地址为https://github.com/Tencent/weui-wxss，然后下载解压之后，先找到weui项目dist\style下名为weui的wxss文件（如下图）

并将weui文件导入到自己项目的目录中（此示例中导入的目录为根目录，如下图）

因为weui文件包含了所有UI效果的逻辑代码，所以导入到项目目录就可以被全局文件app.wxss引用，引用之后就可以让所有页面使用weui的UI效果（引用代码如下）

@import 'weui.wxss'

到了这里，先把自己的项目放一边，导入weui实例项目，从实例项目中寻找实现搜索栏的代码（这里注意一下，因为实例是在dist文件夹中，所以导入时请选择dist文件夹，如下图）

导入的项目如下图

因为我要实现的是搜索栏效果，所以直接跳转到搜索栏页面（如下图）

这里搜索栏的UI效果代码在searchbar.wxml文件上，所以copy一下，将其复制到自己项目对应的页面（搜索栏的UI效果代码如下）

<view class="page">
    <view class="page__hd">
        <view class="page__title">SearchBar</view>
        <view class="page__desc">搜索栏</view>
    </view>
    <view class="page__bd">
        <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="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                        <icon type="clear" size="14"></icon>
                    </view>
                </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>
        <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
            <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                <view class="weui-cell__bd">
                    <view>实时搜索文本</view>
                </view>
            </navigator>
            <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                <view class="weui-cell__bd">
                    <view>实时搜索文本</view>
                </view>
            </navigator>
            <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                <view class="weui-cell__bd">
                    <view>实时搜索文本</view>
                </view>
            </navigator>
            <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                <view class="weui-cell__bd">
                    <view>实时搜索文本</view>
                </view>
            </navigator>
        </view>
    </view>
</view>

然后实现搜索栏点击效果的实现代码在searchbar.js文件上，顺便也copy过来（代码如下）

 data: {
        inputShowed: false,
        inputVal: ""
    },
    showInput: function () {
        this.setData({
            inputShowed: true
        });
    },
    hideInput: function () {
        this.setData({
            inputVal: "",
            inputShowed: false
        });
    },
    clearInput: function () {
        this.setData({
            inputVal: ""
        });
    },
    inputTyping: function (e) {
        this.setData({
            inputVal: e.detail.value
        });
    }

这样搜索栏效果就实现了（效果如下图）