搜索操作条

搜索操作条主要就是search-form，配合 round 和 radius 设置 input 框的样式，然后再用 fixed 固定到顶部即可。

演示代码

<!-- 第一个：搜索按钮在右边 -->
<view class="cu-bar search bg-white">
    <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
            confirm-type="search"></input>
    </view>
    <view class="action">
        <button class="cu-btn bg-green shadow-blur round">搜索</button>
    </view>
</view>

<!-- 第二个：右边是广州选择位置 -->
<view class="cu-bar search bg-white">
    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view>
    <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
            confirm-type="search"></input>
    </view>
    <view class="action">
        <text>广州</text>
        <text class="cuIcon-triangledownfill"></text>
    </view>
</view>

<!-- 第三个：右边是广州选择位置（红色背景） -->
<view class="cu-bar bg-red search">
    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
    <view class="search-form radius">
        <text class="cuIcon-search"></text>
        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
            confirm-type="search"></input>
    </view>
    <view class="action">
        <text>广州</text>
        <text class="cuIcon-triangledownfill"></text>
    </view>
</view>

<!-- 第四个：右边是取消 -->
<view class="cu-bar bg-cyan search">
    <view class="search-form radius">
        <text class="cuIcon-search"></text>
        <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
            confirm-type="search"></input>
    </view>
    <view class="action">
        <text class="cuIcon-close"></text>
        <text>取消</text>
    </view>
</view>

<!-- data -->
return {
    InputBottom: 0
};

<!-- js -->
InputFocus(e) {
    this.InputBottom = e.detail.height
},
InputBlur(e) {
    this.InputBottom = 0
}

按钮组操作条

就是几个按钮，cu-bar 操作条类名就是为这个按钮组设置了平铺的样式

<view class="cu-bar btn-group">
    <button class="cu-btn bg-green shadow-blur round lg">保存</button>
</view>
<view class="btn-group">
    <button class="cu-btn bg-green shadow-blur">保存</button>
    <button class="cu-btn text-green line-green shadow">上传</button>
</view>
<view class="cu-bar btn-group">
    <button class="cu-btn bg-green shadow-blur round">保存</button>
    <button class="cu-btn bg-blue shadow-blur round">提交</button>
</view>

输入操作条

主要由cu-bar和input设置出大体样式，内部填充自定义，

<view class="cu-bar input">
    <view class="action">
        <text class="cuIcon-sound text-grey"></text>
    </view>
    <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" :focus="false" maxlength="300" cursor-spacing="10"></input>
    <view class="action">
        <text class="cuIcon-emojifill text-grey"></text>
    </view>
    <button class="cu-btn bg-green shadow-blur">发送</button>
</view>

<view class="cu-bar input">
    <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
    <view class="action">
        <text class="cuIcon-roundaddfill text-grey"></text>
    </view>
    <input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
    <view class="action">
        <text class="cuIcon-emojifill text-grey"></text>
    </view>
    <button class="cu-btn bg-green shadow-blur">发送</button>
</view>

<!-- data -->
return {
    InputBottom: 0
};

<!-- js -->
InputFocus(e) {
    this.InputBottom = e.detail.height
},
InputBlur(e) {
    this.InputBottom = 0
}