本文整理 8 款主流小程序搜索框样式，源码可直接使用。文章为雪天前端原创整理，转载需授权，私自搬运必究！

一个精美好看的搜索框，不只是界面上的功能入口，更是提升用户体验的关键细节。它能快速帮用户定位内容，减少操作步骤，降低流失率；高颜值设计让界面更精致高级，提升整体质感与品牌形象；同时强化交互体验，让用户愿意点击、愿意使用，间接提升活跃度与转化率。好看又好用的搜索框，是应用里颜值与效率并存的小而美核心功能。

01

渐变边框搜索栏

经典渐变边框设计，圆角通透感强，右侧渐变搜索按钮，整体简约高级，适配大多数 APP / 商城首页。

<template>
  <view class="search-bar">
    <view class="search-container">
      <image class="search-icon" src="/static/xt-search/scan.png" mode="widthFix"></image>
      <input class="search-input" placeholder="搜索美食/民宿/攻略等" placeholder-style="color:#999" />
      <view class="search-button" @click="doSearch">搜索</view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      doSearch() {
        console.log("执行第一个搜索")
      }
    }
  }
</script>

<style scoped>
.search-bar {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 10rpx;
  }
.search-container {
    display: flex;
    align-items: center;
    height: 72rpx;
    padding: 06rpx 020rpx;
    border-radius: 40rpx;
    border: 3rpx solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, #B1A8E6, #9ED5F5, #88E7CB) border-box;
  }
.search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }
.search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
.search-button {
    padding: 036rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    font-size: 28rpx;
    color: #fff;
    background: linear-gradient(90deg, #63D1E8, #7BE8A3);
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

02

城市 + 消息搜索栏

头部导航式搜索框，左侧城市选择、右侧消息角标，适合外卖 / 旅游 / 本地生活类小程序顶部使用。

<template>
  <view class="header-search-bar">
    <view class="city-selector" @click="selectCity">
      <text class="city-text">杭州</text>
      <text class="down-arrow">▼</text>
    </view>
    <view class="header-search-container">
      <image src="/static/xt-search/searchIcon.png" class="header-search-icon" mode="widthFix"></image>
      <input class="header-search-input" placeholder="雪天前端" placeholder-style="color:#999" />
    </view>
    <view class="message-icon-wrapper" @click="openMessage">
      <image src="/static/xt-search/messageIcon.png" class="message-icon" mode="widthFix"></image>
      <view class="badge">12</view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      selectCity() {
        console.log("打开城市选择器")
      },
      openMessage() {
        console.log("打开消息列表")
      }
    }
  }
</script>

<style scoped>
.header-search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fef6f6;
    border-radius: 20rpx;
  }
.city-selector {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
  }
.city-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
.down-arrow {
    font-size: 24rpx;
    color: #666;
    margin-left: 8rpx;
  }
.header-search-container {
    flex: 1;
    display: flex;
    align-items: center;
    height: 72rpx;
    padding: 024rpx;
    border-radius: 36rpx;
    background-color: #fff;
    border: 2rpx solid #f0e0e0;
  }
.header-search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }
.header-search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
.message-icon-wrapper {
    position: relative;
    margin-left: 20rpx;
  }
.message-icon {
    width: 60rpx;
    height: 60rpx;
  }
.badge {
    position: absolute;
    top: -12rpx;
    right: -12rpx;
    min-width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    padding: 08rpx;
    background-color: #ff4d4f;
    color: #fff;
    font-size: 20rpx;
    border-radius: 16rpx;
    text-align: center;
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

03

左侧标题 + 绿色按钮搜索栏

左侧大标题 + 右侧一体化搜索框，绿色按钮醒目，适合工具类、内容类平台首页搜索使用。

<template>
  <view class="third-search-bar">
    <view class="third-title">雪天前端</view>
    <view class="third-search-container">
      <view class="third-search-inner">
        <image class="third-search-icon" src="/static/xt-search/scan.png" mode="widthFix"></image>
        <input class="third-search-input" placeholder="搜索关键字" placeholder-style="color:#999" />
      </view>
      <view class="third-search-btn" @click="thirdSearch">搜索</view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      thirdSearch() {
        console.log("执行第三个搜索")
      }
    }
  }
</script>

<style scoped>
.third-search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #e8f9e8;
    border-radius: 20rpx;
  }
.third-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-right: 24rpx;
  }
.third-search-container {
    flex: 1;
    display: flex;
    align-items: center;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff;
    border: 3rpx solid #333;
    overflow: hidden;
  }
.third-search-inner {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 024rpx;
  }
.third-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.third-search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    background: transparent;
  }
.third-search-btn {
    width: 140rpx;
    height: 100%;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    background-color: #89e889;
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

04

黄色边框 + 热门标签搜索栏

暖黄色渐变边框 + 热门标签，视觉吸睛，适合二手市场、活动、优惠类平台使用。

<template>
  <view class="fourth-search-bar">
    <view class="fourth-search-container">
      <image class="fourth-search-icon" src="/static/xt-search/scan.png" mode="widthFix"></image>
      <input class="fourth-search-input" placeholder="二手市场大降价" placeholder-style="color:#333" />
      <view class="fourth-hot-tag">热</view>
      <view class="fourth-search-btn" @click="fourthSearch">搜索</view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      fourthSearch() {
        console.log("执行搜索")
      }
    }
  }
</script>

<style scoped>
.fourth-search-bar {
    padding: 20rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
  }
.fourth-search-container {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 06rpx 024rpx;
    border-radius: 40rpx;
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, #ffff7f, #fff478) border-box;
    border: 3rpx solid transparent;
  }
.fourth-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.fourth-search-input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #333;
  }
.fourth-hot-tag {
    padding: 4rpx 12rpx;
    margin: 016rpx;
    font-size: 24rpx;
    color: #ff6600;
    background-color: #fff5e6;
    border-radius: 8rpx;
  }
.fourth-search-btn {
    width: 140rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    background: linear-gradient(90deg, #fff2cc, #ffeb99);
    border-radius: 32rpx;
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

05

橙色边框 + 相机图标搜索栏

复古橙色边框 + 相机识图按钮，橙色搜索图标，适合电商、数码、图片搜索类场景。

<template>
  <view class="fifth-search-bar">
    <view class="fifth-search-container">
      <image class="fifth-search-icon" src="/static/xt-search/scan.png" mode="widthFix"></image>
      <input class="fifth-search-input" placeholder="iphone17 plus抢购" placeholder-style="color:#999" />
      <image class="fifth-camera-icon" src="/static/xt-search/camera.png" mode="widthFix"></image>
      <view class="fifth-search-btn" @click="fifthSearch">
        <image src="/static/xt-search/search-orange.png" mode="widthFix"></image>
      </view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      fifthSearch() {
        console.log("执行第五个搜索")
      }
    }
  }
</script>

<style scoped>
.fifth-search-bar {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
.fifth-search-container {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 06rpx 024rpx;
    border-radius: 40rpx;
    background-color: #fff;
    border: 3rpx solid #cc8866;
  }
.fifth-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.fifth-search-input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #999;
  }
.fifth-camera-icon {
    width: 60rpx;
    height: 60rpx;
    margin: 020rpx;
  }
.fifth-search-btn {
    width: 90rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #ff7744, #ff5522);
    border-radius: 40rpx;
  }
.fifth-search-btnimage {
    width: 40rpx;
    height: 40rpx;
  }
</style>

06

浅蓝渐变 + 登录按钮搜索栏

清爽浅蓝色渐变边框，右侧用户登录按钮，适合商城、服务类小程序未登录状态使用。

<template>
  <view class="sixth-search-bar">
    <view class="sixth-search-container">
      <image class="sixth-search-icon" src="/static/xt-search/scan.png" mode="widthFix"></image>
      <input class="sixth-search-input" placeholder="搜索商品或店铺名" placeholder-style="color:#999" />
    </view>
    <view class="sixth-login-btn" @click="sixthLogin">
      <image src="/static/xt-search/user.png" mode="widthFix"></image>
      <text>登录</text>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      sixthLogin() {
        console.log("打开登录弹窗")
      }
    }
  }
</script>

<style scoped>
.sixth-search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
.sixth-search-container {
    flex: 1;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 024rpx;
    border-radius: 40rpx;
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, #e6f2ff, #f0f8ff) border-box;
    border: 3rpx solid transparent;
  }
.sixth-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.sixth-search-input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #333;
  }
.sixth-login-btn {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    font-size: 32rpx;
    color: #4488dd;
  }
.sixth-login-btnimage {
    width: 40rpx;
    height: 40rpx;
    margin-right: 8rpx;
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

07

绿色背景 + 双图标搜索栏

墨绿色主题背景，左侧菜单 + 右侧消息角标，中间麦克风语音搜索，高级感拉满。

<template>
  <view class="seventh-search-bar">
    <view class="seventh-left-icon" @click="seventhLeftClick">
      <image src="/static/xt-search/menu.png" mode="widthFix"></image>
    </view>
    <view class="seventh-search-container">
      <image class="seventh-search-icon" src="/static/xt-search/searchIcon.png" mode="widthFix"></image>
      <input class="seventh-search-input" placeholder="雪天前端" placeholder-style="color:#999" />
      <view class="seventh-mic-icon" @click="seventhMicClick">
        <image src="/static/xt-search/mic.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="seventh-right-icon" @click="seventhRightClick">
      <image src="/static/xt-search/message-filled.png" mode="widthFix"></image>
      <view class="seventh-badge">7</view>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      seventhLeftClick() {
        console.log("第七个左侧图标点击")
      },
      seventhMicClick() {
        console.log("第七个麦克风点击")
      },
      seventhRightClick() {
        console.log("第七个消息图标点击")
      }
    }
  }
</script>

<style scoped>
.seventh-search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #009688;
    border-radius: 20rpx;
  }
.seventh-left-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
  }
.seventh-left-iconimage {
    width: 100%;
    height: 100%;
  }
.seventh-search-container {
    flex: 1;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 024rpx;
    border-radius: 40rpx;
    background-color: #fff;
  }
.seventh-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.seventh-search-input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #333;
  }
.seventh-mic-icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
  }
.seventh-mic-iconimage {
    width: 100%;
    height: 100%;
  }
.seventh-right-icon {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    margin-left: 20rpx;
  }
.seventh-right-iconimage {
    width: 100%;
    height: 100%;
  }
.seventh-badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    background-color: #ff4d4f;
    color: #fff;
    font-size: 20rpx;
    border-radius: 50%;
  }
</style>

文章为雪天前端原创整理，转载需授权，私自搬运必究！

08

浅绿色背景 + 品牌 LOGO 搜索栏

清新绿色背景，左侧品牌 LOGO，右侧扫描按钮，品牌化极强，适合企业官网、品牌类小程序。

<template>
  <view class="eighth-search-bar">
    <view class="eighth-brand">
      <image class="eighth-brand-icon" src="/static/xt-search/user.png" mode="widthFix"></image>
      <text class="eighth-brand-text">snow</text>
    </view>
    <view class="eighth-search-container">
      <image class="eighth-search-icon" src="/static/xt-search/searchIcon.png" mode="widthFix"></image>
      <input class="eighth-search-input" placeholder="搜索雪天前端~" placeholder-style="color:#999" />
    </view>
    <view class="eighth-menu-icon" @click="eighthMenuClick">
      <image src="/static/xt-search/scan.png" mode="widthFix"></image>
    </view>
</view>
</template>

<script>
exportdefault {
    methods: {
      eighthMenuClick() {
        console.log("第八个菜单图标点击")
      }
    }
  }
</script>

<style scoped>
.eighth-search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #d4f4c4;
    border-radius: 20rpx;
  }
.eighth-brand {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
  }
.eighth-brand-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 12rpx;
  }
.eighth-brand-text {
    font-size: 40rpx;
    font-weight: bold;
    color: #222;
  }
.eighth-search-container {
    flex: 1;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 024rpx;
    border-radius: 40rpx;
    background-color: rgba(255, 255, 255, 0.7);
  }
.eighth-search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
.eighth-search-input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #333;
    background: transparent;
  }
.eighth-menu-icon {
    width: 60rpx;
    height: 60rpx;
    margin-left: 20rpx;
  }
.eighth-menu-iconimage {
    width: 100%;
    height: 100%;
  }
</style>

打码不易，如有帮助，可以求大佬一个免费的关注吗，非常感谢！

文章为雪天前端原创整理，转载需授权，私自搬运必究！

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。

优网知识库

探索行业前沿，共享知识宝库

告别普通样式！uni-app 8 种高级搜索框源码

01

02

03

04

05

06

07

08

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

优网知识库

探索行业前沿，共享知识宝库

告别普通样式！uni-app 8 种高级搜索框源码

01

02

03

04

05

06

07

08

企微云

客户池

微信小名片

网站建设

优网科技

小名片

53AI

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设