uniapp前端实现搜索框功能

最新推荐文章于 2025-05-15 23:25:20 发布

原创最新推荐文章于 2025-05-15 23:25:20 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

实现结果：实现搜索框的这个功能

实现思路：左右两个盒子div的方式实现

实现代码

<template>
    <view class="mena">
        <view class="menb">
            <img src="static/喇叭.png" alt="" />
            <input type="text" value="" placeholder="搜索" />
        </view>
        <view class="menc">
            搜索
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
     
    };
  },
  methods: {
    
  },
};
</script>

<style scoped>
/* page{
     background: #f0f0f0;
 } */
  .mena{
     background: #f0c4f0;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      left: 5rpx;
  }
  .menb img{
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      left: 0;
      align-self: center;
  }
  view{
      font-size: 30rpx;
  }
  input{
      height: 70rpx;
      width: 100%;
      border-radius: 7rpx;
      padding-left: 55rpx;
      border: none;
      background: white;
  }
  .menb{
      height: 70rpx;
      display: flex;
      position: relative;
      flex: 1;
      
  }
  .menc{
      padding-left: 20rpx;
  }
</style>