小程序顶部搜索框

home.wxml

<view class='page_row'>
    <view class="search">
        <view class="search_arr">
            <icon class="searchcion" size='20' type='search'></icon>
            <input class="sousuo" disabled placeholder="搜索" bindtap='search' />
        </view>
    </view>
</view>

home.wxss

.seach{
    width: 98%;
}
.search_arr{
    border: 1px solid #d0d0d0;
    border-radius: 10rpx;
    margin-left: 20rpx;
    width: 710rpx;
}
.search_arr input{
    margin-left: 60rpx;
    height: 60rpx;
    border-radius: 5px;
}
.sousuo{
    padding-left: 36%;
    width:15%;
    line-height: 150%;
    text-align: center;
}
.page_row{
    display: flex;
    flex-direction: row;
}
.searchcion{
    margin:10rpx 10rpx 10rpx 10rpx;
    position: absolute;
    margin-left: 38%;
    z-index: 2;
    width:15px;
    height: 15px;
    text-align: center;
}

home.js

Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
     //跳转到搜索页面
    search:function(){
        wx.navigateTo({
          url: '../search/search',
        })
    }

search.wxml

<view>
    <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!--搜索框-->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/>
                </view>
            </view>
            <!--取消搜索-->
            <view class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>
        </view>
    </view>
</view>

search.wxss

.weui-search-bar{
    position: relative;
    padding:8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    box-sizing: border-box;
    background-color: #efeff4;
    border-top: 1rpx solid #d7d6dc;
    border-bottom: 1rpx solid #d7d6dc;
}
.weui-icon-search_in-box{
    position: absolute;
    left: 10px;
    top: 7px;
}
.weui-search-bar__form{
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
            flex: auto;
    border-radius: 5px;
    background: #ffffff;
    border: 1rpx solid #e6e6ea;
}
.weui-search-bar__box{
    position: relative;
    padding-left: 30px;
    padding-right:30px;
    width:100%;
    box-sizing: border-box;
    z-index: 1;
}
.weui-search-bar__input{
    height: 28px;
    line-height: 28px;
    font-size: 14px;
}
.weui-search-bar__cancel-btn{
    margin-left:10px;
    line-height:28px;
    color: #09bb07;
    white-space: nowrap;
}

search.js

Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    //取消搜索，返回主页面
    hideInput:function(){
        wx.navigateTo({
          url: '../home/home',
        })
    }

学习笔记（代码的解释）

wxml

1.bindtap:事件绑定

在wxml文件中进行事件绑定

<input class="sousuo" disabled placeholder="搜索" bindtap='search' />

在js文件中进行响应

 search:function(){
    wx.navigateTo({
      url: '../search/search',
    })
}

2.icon：图标

小程序官方图标：链接: link

阿里巴巴矢量图标库 地址 https://www.iconfont.cn/

3.input 链接: link

<input class="sousuo" disabled placeholder="搜索" bindtap='search' />

·placeholder:输入框为空时的占位符

·disabled ：默认为false 不禁用输入框，为true时是不可输入的

·password ：默认为 false ，为true时，输入的内容为密码类型

·bindinput： 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。

·type：文本框输入内容格式：

wxss

1. border（上右下左）

2. border-radius：为元素添加圆角边框

3. line-height

4. flex-direction

5. 

6. position 链接: link

7. z-index
   ·属性指定一个元素的堆叠顺序
   ·拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

8. padding和margin
   ·padding是内边距
   ·margin是外边距

来源：https://blog.csdn.net/m0_67466364/article/details/129015512