微信小程序顶部搜索框

_小杜小杜_

已于 2024-04-14 22:01:28 修改

阅读量1.4k

点赞数 4

分类专栏：前端学习文章标签：微信小程序 javascript 前端

于 2023-02-13 22:09:58 首次发布

本文链接：https://blog.csdn.net/m0_67466364/article/details/129015512

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

在这里插入图片描述

图1代码如下：
wxml

<!--pages/home/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>

wxss

/* pages/home/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;
}

// pages/home/home.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },
 //跳转到搜索页面
    search:function(){
        wx.navigateTo({
          url: '../search/search',
        })
    }

搜索页面代码如下：
wxml

<!--pages/home/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>

wxss

/* pages/home/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;
}

// pages/home/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：文本框输入内容格式：
在这里插入图片描述