weui-wxss/src/example/searchbar/searchbar.wxml at 56e582e325eb28333b2af74e5381c09c5305ce34 · Tencent/weui-wxss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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-search-panel" hidden="{{!inputShowed}}">
            <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>
</view>