微信小程序开发指南

基于ColorUI的组件化页面开发


搜索操作条

搜索操作条

  • 样式图例

  • 示例代码
<view class="cu-bar search bg-white">
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input 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://image.weilanwl.com/img/square-2.jpg);"></view>
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input 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://image.weilanwl.com/img/square-1.jpg);"></view>
    <view class="search-form radius">
      <text class="cuIcon-search"></text>
      <input 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 type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
    </view>
    <view class="action">
      <text class="cuIcon-close"></text>
      <text>取消</text>
    </view>
  </view>

页面列表

ITEM_HTML