JavaScript移动端模拟微信搜索框searchBar

JavaScript移动端模拟微信搜索框searchBar

效果展示:

  • 初始状态,提示语居中,内容:icon+搜索
7162582-1aa839b01ce7d6c1.jpg
sb1
  • 点击后获取焦点,icon靠右,右边出现取消按钮,点击取消恢复初始状态
7162582-a5d35ca85d4e65b3.jpg
sb2
  • 输入内容后出现删除文字按钮,虚拟键盘出现搜索按钮
7162582-a1d91ebc303407dc.jpg
sb3

7162582-aaf0e57f6cec189d.jpg
sb4

实现步骤:

第一步,提示语中包含icon图标并文字居中

由于input的placeholder并不可以添加图片,所以只能做一个假的placeholder

<i class='iconfont icon-sousuo'></i>
<div>搜索</div>
<input  placeholder="搜索" />

第二步,操作过程的显示与隐藏

  1. 点击前先将input隐藏起来
  2. 点击时文字隐藏,input显示
  3. 输入时框右侧出现清除文字按钮,以及取消输入按钮
  4. 点击取消按钮恢复初始状态
    使用flex布局和盒子模型box结构,能够解决多个块居中和水平分布问题
-webkit-box-flex: 1;
-ms-flex: 1;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;

使用一个类来定义点击后的状态,通过添加删除这个类来控制各个块的显示隐藏切换

&.active{
    .search__text{
        display: none;
    }
    .search__input, .search__delete,.search__cancle{
        display: block;
    }
}

第三步,虚拟键盘上的搜索键显示

input中选择type=search,而且要在input外加上form标签,这样才能在虚拟键盘上显示搜索字样

<form autocomplete="off" class='search__input' onsubmit="return false" action=".">
    <input 
        type='search' 
        placeholder="搜索 " 
    />
</form>

以下是使用vue实现的完整代码:

<template>
    <div class='search'>
        <label class='search__container':class='{active:isActive}' >
            <div class='search__body' @click="switchSearch">
                <i class='search__icon iconfont icon-sousuo'></i>
                <div class='search__text'>搜索</div>
                <form autocomplete="off" class='search__input' onsubmit="return false" action=".">
                    <input 
                        class='iconfont icon-sousuo' 
                        type='search' 
                        placeholder="搜索" 
                        v-model="value"
                        @search="search"
                    />
                </form>
                <i class='search__delete iconfont icon-shanchu' v-show='value' @click="clearInput"></i>
            </div>
            <div class='search__cancle' @click.prevent='cancle'>取消</div>
        </label>    
    </div>
</template>

<script>
export default {
    data () {
        return {
            isActive: false,
            value: ''
        }
    },
    methods: {
        switchSearch () {
            this.isActive = true
        },
        search () {
            this.value = this.value.trim()
        },
        clearInput () {
            this.value = ''
        },
        cancle () {
            this.value = ''
            this.isActive = false
        }
    }
}
</script>


<style lang="less">
    input::-ms-clear,
    input::-ms-reveal {
        display: none;
    }

    input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }

    .search{
        background-color: #41B883;   
        width: 100%;
        height: .88rem;
        z-index: 99;
        .search__container{
            display: -webkit-box;
            display: -ms-flexbox;
            .search__body{
                height: .58rem;
                line-height: .58rem;
                margin: .14rem .24rem;
                border-radius:2rem;
                font-size: .24rem;
                color:#768893;
                background: #f4f6f9;
                position: relative;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                display: -webkit-box;
                display: -ms-flexbox;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                .search__icon{
                    font-size: .24rem;
                    color:#768893;
                    vertical-align: middle;
                    margin-left: 0.2rem;
                }
                .search__text{
                    display: inline;
                    font-size: .24rem;
                    color:#768893;
                    line-height: 0.36rem;
                    padding-left: 0.1rem;
                }
                .search__input{
                    padding-left: 0.2rem;
                    -webkit-box-flex: 1;
                    color:#768893;
                    display: none;
                    overflow: hidden;
                    input{
                        width: 100%;
                        background: #f4f6f9;
                        letter-spacing: -0.14px;
                        border: 0;
                        -webkit-appearance: none;
                        font-size: 0.24rem;
                        color: #3F3F3F;
                        letter-spacing: -0.14px;
                        padding-left: 0.1rem;
                        border-top-right-radius: 50%;
                        border-bottom-right-radius: 50%;
                    }
                }
                .search__delete{
                    display: none;
                    font-size: .3rem;
                    margin-right: 0.16rem;
                }
            }
            .search__cancle{
                display: none;
                height: .58rem;
                line-height: .58rem;
                padding: .14rem .24rem .14rem 0;
                border-radius:2rem;
                font-size: .24rem;
                color:#ffffff;
            }
            &.active{
                .search__text{
                    display: none;
                }
                .search__input, .search__delete,.search__cancle{
                    display: block;
                }
            }
        }  
    }
</style>
展开阅读全文

没有更多推荐了,返回首页