【组件】微信小程序input搜索框的实现

转载

mb5fdcadbf25fde 2018-07-05 14:18:00

文章标签 ico 公众号技术讨论 html 搜索 文章分类 Html/CSS 前端开发

开发小程序的过程，是一个学习知识，解决问题的过程，每当实现了一个需求，总会有很大的成就感，每天记录一个开发过程中的细节。

实现效果如下：

【组件】微信小程序input搜索框的实现_公众号

官方参考链接：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml:

  <view class='page_row' bindtap="suo">  
<view class="search">  
<view class="df search_arr">  
<icon class="searchcion" size='20' type='search'></icon>  
<input class="" disabled placeholder="请输入关键字" value="{{searchValue}}"/>  
</view>  
</view>  
<view class='sousuo'>搜索</view>  
</view>

wxss:

    .search{  
width: 80%;  
    }  
.search_arr {  
border: 1px solid #d0d0d0;  
border-radius: 10rpx;  
margin-left: 20rpx;  
    }  
.search_arr input{  
margin-left: 60rpx;  
height: 60rpx;  
border-radius: 5px;  
    }  
.bc_text {  
line-height: 68rpx;  
height: 68rpx;  
margin-top: 34rpx;  
    }  

.sousuo {  
margin-left: 15rpx;  
width: 15%;  
line-height: 150%;  
text-align: center;  
border: 1px solid #d0d0d0;  
border-radius: 10rpx;  
    }  
.page_row{  
display: flex;  
flex-direction: row  
    }  
.searchcion {  
margin: 10rpx 10rpx 10rpx 10rpx;  
position: absolute;  
left:25rpx;  
z-index: 2;  
width: 20px;  
height: 20px;  
text-align: center;  
    }