uniapp之封装公共的搜索控件

原创最新推荐文章于 2026-09-13 12:13:20 发布 8.8w 阅读 AI写同款

收录于

uniapp混合开发

移动端

别忘了微笑_cuicui

码龄8年墨衍会员 · AI 创作全网分发

227粉丝99篇原创

关注

全开源旅游门票预订系统：FastAdmin+ThinkPHP+Uniapp技术拆解在旅游数字化与私域运营的浪潮下，景区门票线上化已成为刚需，而一套可二次开发的全开源票务系统能大幅降低从0到1的落地成本。基于FastAdmin、ThinkPHP和Uniapp构建的旅游门票预订系统，正是面向这类场景的典型范本：FastAdmin提供后台权限管理与CRUD快速生成，ThinkPHP承担订单状态机与支付回调等核心业务逻辑，Uniapp则借助多端编译能力让同一套代码覆盖公众号H5、微信小程序及App。从景区票种库存、订单交易流转，到核销码防重、分销佣金结算，这套系统将旅游行业高频业务链路完整闭环。阅读详情

AI摘要

本文介绍了一个可复用的搜索组件的实现，通过Vue.js创建，旨在提高代码的复用性和维护性。组件提供了自定义样式、占位符、边框半径及清除按钮设置，适用于多种UI场景。

为了增加代码的复用性，多次重复的

效果图如下：

1、在componts文件夹下创建一个uni-search.vue的文件

.uni-searchbar{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
   .uni-searchbar-form__box {
       display: flex;
       flex: 1;
       align-items: center;
       width: 100%;
       height: 64rpx;
       color: #c8c7cc;
       background: #fff;
       border: solid 1px #c8c7cc;
       border-radius: 10rpx
   }

   .uni-searchbar-form__box .icon-search {
       color: #c8c7cc;
       line-height: 24px;
       padding: 0rpx 10rpx 0rpx 15rpx
   }

   .uni-searchbar-form__box .search-input {
       flex: 1;
       font-size: 20rpx;
       height: 64rpx;
       line-height: 64rpx;
       color: #333
   }

   .uni-searchbar-form__box .icon-clear {
       color: #c8c7cc;
       line-height: 20px;
       padding: 0rpx 15rpx 0rpx 10rpx
   }

   .uni-searchbar-form__text {
       display: flex;
       flex: 1;
       align-items: center;
       width: 100%;
       height: 64rpx;
       line-height: 64rpx;
       text-align: center;
       color: #c8c7cc;
       background: #fff;
       border: solid 1px #c8c7cc;
       border-radius: 10rpx;
       display: none
   }

   .uni-searchbar-form__text .icon-search {
       height: 64rpx;
       line-height: 64rpx
   }

   .uni-searchbar-form__text .placeholder {
       display: inline-block;
       font-size: 28rpx;
       color: #ccc;
       margin-left: 10rpx
   }
   .searchButton{
       height: 64rpx;
       margin-left:20upx;
       border-radius: 20upx;
       line-height: 64rpx;
       font-size: 20upx;
   }

</style>

2、去相应的界面进行引用

<view class="searchBox">
               <uniSearch
               placeholder="输入工作项执行人或项目名称"
               radius="100"
               clearButton="auto"
               @searchClick="searchData">
               </uniSearch>
           </view>

import uniSearch from '@/components/uni-search.vue'

export default {
       components:{
           uniSearch
       },

}

methods:{
           /**
           * 搜索按钮
           */
           searchData(val){
               // val 为input框上输入的值
               console.log(val,'ggg')
           },

}

附：uni-icons.vue文件是对字体图标库的封装，uniapp模板实例中有，可以直接拿来用。

   .uni-icon-wrapper {
       line-height: 1;
   }

   .uni-icon {
       font-family: uniicons;
       font-weight: normal;
       font-style: normal;
       line-height: 1;
       display: inline-block;
       text-decoration: none;
       -webkit-font-smoothing: antialiased;
   }

   .uni-icon.uni-active {
       color: #007aff;
   }

   .uni-icon-contact:before {
       content: '\e100';
   }

   .uni-icon-person:before {
       content: '\e101';
   }

   .uni-icon-personadd:before {
       content: '\e102';
   }

   .uni-icon-contact-filled:before {
       content: '\e130';
   }

   .uni-icon-person-filled:before {
       content: '\e131';
   }

   .uni-icon-personadd-filled:before {
       content: '\e132';
   }

   .uni-icon-phone:before {
       content: '\e200';
   }

   .uni-icon-email:before {
       content: '\e201';
   }

   .uni-icon-chatbubble:before {
       content: '\e202';
   }

   .uni-icon-chatboxes:before {
       content: '\e203';
   }

   .uni-icon-phone-filled:before {
       content: '\e230';
   }

   .uni-icon-email-filled:before {
       content: '\e231';
   }

   .uni-icon-chatbubble-filled:before {
       content: '\e232';
   }

   .uni-icon-chatboxes-filled:before {
       content: '\e233';
   }

   .uni-icon-weibo:before {
       content: '\e260';
   }

   .uni-icon-weixin:before {
       content: '\e261';
   }

   .uni-icon-pengyouquan:before {
       content: '\e262';
   }

   .uni-icon-chat:before {
       content: '\e263';
   }

   .uni-icon-qq:before {
       content: '\e264';
   }

   .uni-icon-videocam:before {
       content: '\e300';
   }

   .uni-icon-camera:before {
       content: '\e301';
   }

   .uni-icon-mic:before {
       content: '\e302';
   }

   .uni-icon-location:before {
       content: '\e303';
   }

   .uni-icon-mic-filled:before,
   .uni-icon-speech:before {
       content: '\e332';
   }

   .uni-icon-location-filled:before {
       content: '\e333';
   }

   .uni-icon-micoff:before {
       content: '\e360';
   }

   .uni-icon-image:before {
       content: '\e363';
   }

   .uni-icon-map:before {
       content: '\e364';
   }

   .uni-icon-compose:before {
       content: '\e400';
   }

   .uni-icon-trash:before {
       content: '\e401';
   }

   .uni-icon-upload:before {
       content: '\e402';
   }

   .uni-icon-download:before {
       content: '\e403';
   }

   .uni-icon-close:before {
       content: '\e404';
   }

   .uni-icon-redo:before {
       content: '\e405';
   }

   .uni-icon-undo:before {
       content: '\e406';
   }

   .uni-icon-refresh:before {
       content: '\e407';
   }

   .uni-icon-star:before {
       content: '\e408';
   }

   .uni-icon-plus:before {
       content: '\e409';
   }

   .uni-icon-minus:before {
       content: '\e410';
   }

   .uni-icon-circle:before,
   .uni-icon-checkbox:before {
       content: '\e411';
   }

   .uni-icon-close-filled:before,
   .uni-icon-clear:before {
       content: '\e434';
   }

   .uni-icon-refresh-filled:before {
       content: '\e437';
   }

   .uni-icon-star-filled:before {
       content: '\e438';
   }

   .uni-icon-plus-filled:before {
       content: '\e439';
   }

   .uni-icon-minus-filled:before {
       content: '\e440';
   }

   .uni-icon-circle-filled:before {
       content: '\e441';
   }

   .uni-icon-checkbox-filled:before {
       content: '\e442';
   }

   .uni-icon-closeempty:before {
       content: '\e460';
   }

   .uni-icon-refreshempty:before {
       content: '\e461';
   }

   .uni-icon-reload:before {
       content: '\e462';
   }

   .uni-icon-starhalf:before {
       content: '\e463';
   }

   .uni-icon-spinner:before {
       content: '\e464';
   }

   .uni-icon-spinner-cycle:before {
       content: '\e465';
   }

   .uni-icon-search:before {
       content: '\e466';
   }

   .uni-icon-plusempty:before {
       content: '\e468';
   }

   .uni-icon-forward:before {
       content: '\e470';
   }

   .uni-icon-back:before,
   .uni-icon-left-nav:before {
       content: '\e471';
   }

   .uni-icon-checkmarkempty:before {
       content: '\e472';
   }

   .uni-icon-home:before {
       content: '\e500';
   }

   .uni-icon-navigate:before {
       content: '\e501';
   }

   .uni-icon-gear:before {
       content: '\e502';
   }

   .uni-icon-paperplane:before {
       content: '\e503';
   }

   .uni-icon-info:before {
       content: '\e504';
   }

   .uni-icon-help:before {
       content: '\e505';
   }

   .uni-icon-locked:before {
       content: '\e506';
   }

   .uni-icon-more:before {
       content: '\e507';
   }

   .uni-icon-flag:before {
       content: '\e508';
   }

   .uni-icon-home-filled:before {
       content: '\e530';
   }

   .uni-icon-gear-filled:before {
       content: '\e532';
   }

   .uni-icon-info-filled:before {
       content: '\e534';
   }

   .uni-icon-help-filled:before {
       content: '\e535';
   }

   .uni-icon-more-filled:before {
       content: '\e537';
   }

   .uni-icon-settings:before {
       content: '\e560';
   }

   .uni-icon-list:before {
       content: '\e562';
   }

   .uni-icon-bars:before {
       content: '\e563';
   }

   .uni-icon-loop:before {
       content: '\e565';
   }

   .uni-icon-paperclip:before {
       content: '\e567';
   }

   .uni-icon-eye:before {
       content: '\e568';
   }

   .uni-icon-arrowup:before {
       content: '\e580';
   }

   .uni-icon-arrowdown:before {
       content: '\e581';
   }

   .uni-icon-arrowleft:before {
       content: '\e582';
   }

   .uni-icon-arrowright:before {
       content: '\e583';
   }

   .uni-icon-arrowthinup:before {
       content: '\e584';
   }

   .uni-icon-arrowthindown:before {
       content: '\e585';
   }

   .uni-icon-arrowthinleft:before {
       content: '\e586';
   }

   .uni-icon-arrowthinright:before {
       content: '\e587';
   }

   .uni-icon-pulldown:before {
       content: '\e588';
   }

   .uni-icon-closefill:before {
       content: '\e589';
   }

   .uni-icon-sound:before {
       content: '\e590';
   }

   .uni-icon-scan:before {
       content: '\e612';
   }
</style>

若依后台与UniApp前端整合开发租房小程序实战指南在前后端分离架构中，RESTful API是实现数据通信的核心技术，它通过标准化的HTTP方法（如GET、POST）和JSON数据格式，实现了前后端职责的解耦与高效协作。这种架构模式在现代Web和移动应用开发中具有重要价值，尤其适用于需要快速迭代和多端适配的业务场景，如O2O平台、电商系统和内容管理系统。通过结合成熟的后台管理框架与跨端开发方案，开发者可以大幅提升开发效率，将精力聚焦于核心业务逻辑的实现。本文以租房小程序为例，详细阐述了如何利用若依（RuoYi）框架的强大后台能力与UniApp的跨端特性，构阅读详情

uniapp之封装公共的搜索控件

相关推荐