搜索框代码

index.wxml：

复制可以用 

<!--    添加代码分割线    -->

 

<!-- 加入代码部分，为搜索栏代码  测试 -->

   

<view class =" top-group">  

   <!--  这可以理解为嵌套的一个定义。search-group定义。定义在top里面 -->

     <view class='search-group'> 

       <!-- size 指定尺寸  -->

     <icon type ='search'   class='search-icon' size="20px">  </icon>  

     <input class='search-input' placeholder=" 搜索产品"

     placeholder-class='placeholder-input'    

      > </input> 

    

     <icon type="clear " class=" clear-icon" size="20px"> </icon>

    

      

  

 

     </view>

</view>

<!-- 添加分割线  -->

  

--------------------------------
wxss：

复制可用。 

 

/*  搜索框的宽度，高度设置代码 */

 

.search-group{

  width: 100%;

  height:70rpx;

background: #fff;

display: flex;

justify-content: flex-start;

align-items: center;

padding: 0 20rpx;

box-sizing:border-box;

border-radius: 10rpx;

}

 

.search-group .search-icon {

  flex-basis:20px;

}

 

.search-group .clear-icon{

  flex-basis:20px;

}

 

.search-group .search-input{

flex:1;

padding:0 10rpx;

box-sizing:border-box;

font-size:28rpx;

 

}

 

placeholder-input{

  font-size:28rpx;

  

  }