微信小程序商城项目（篇1）：搜索栏组件实现

效果

定义组件

<view class="searchArea">
    <input class="inputContent" placeholder="请输入需要查询的商品名称" />
    <text class="btn">搜索</text>
</view>

组件样式

.searchArea{
    height: 15%;
    width: 100%;
    background-color: rgb(109, 19, 19);
    font-size: 12px;
}
.inputContent{
    float: left;
    width: 75%;
    height: 60rpx;
    background-color: whitesmoke;
    margin-top: 30rpx;
    padding-left: 10rpx;
    padding-top:10rpx;
    padding-bottom: 10rpx;
    margin-left: 10rpx;
}
.btn{
    float: right;
    background-color: whitesmoke;
    padding: 20rpx;
    margin-top: 30rpx;
    margin-right: 20rpx;
}

页面中使用自定义组件

页面配置文件

{
  "usingComponents": {
    "search":"../../components/search/search"
  }
}

页面中使用

    <!-- 搜索区域 -->
    <search></search>