商业级web阅读器项目（下下下）

7-2.书架搜索框交互实现（上）

向下滑动屏幕时的交互细节分析

标题和推荐图标向下渐渐隐藏。
搜索框向上移动到标题位置。
搜索框逐渐变窄以适应屏幕。
返回按钮向下居中。
标题下方显示阴影。
用titleVisible来控制标题的显示

7-3 书城首页（标题+搜索框布局）

界面效果如图’

<template>
    <div class="search-bar" :class="{
    'hide-title':!titleVisible}">
        <transition name="title-move">
            <div class="search-bar-title-wrapper" v-show="titleVisible">
                <div class="title-icon-back-wrapper"><span class="icon-back icon"></span></div>
                <div class="title-text-wrapper"><span class="title-text title">{
  {$t('home.title')}}</span></div>
                <div class="title-icon-shake-wrapper"><span class="icon-shake icon"></span></div>
            </div>
        </transition>
        <div class="search-bar-input-wrapper">
            <div class="search-bar-input">
                <span class="icon-search icon"></span>
                <input type="text"
                       class="input"
                       :placeholder="$t('home.hint')"
                       v-model="searchText"
                >
            </div>
        </div>
    </div>
</template>

<script>
    import {
    storeHomeMixin} from "../../utils/mixin";

    export default {
    
        name: "SearchBar",
        mixins:[storeHomeMixin],
        data(){
    
            return{
    
                searchText:'',
                titleVisible:true
            }
        },
        watch:{
    
            offsetY(offsetY){
    
                if (offsetY>0){
    
                    this.hideTitle();
                } else {
    
                    this.showTitle();
                }
            }
        },
        methods:{
    
            hideTitle(){
    
                this.titleVisible = false;
            },
            showTitle(){
    
                this.titleVisible = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./../../assets/styles/global";
    .search-bar{
    
        z-index: 150;
        position: relative;
        width: 100%;
        height: px2rem(94);
        &.hide-title{
    
            height: px2rem(52);
        }