[TOC] #### 仿有道App 導航效果  * [ ] 實現代碼 homeMain ~~~ <template> <div class="home-main"> <search-bar /> <cube-scroll ref="scroll" :option="options" :scroll-events="['scroll']" @scroll="onScrollHandle" > </cube-scroll> </div> </template> <script> import SearchBar from "../../components/home/SearchBar"; import { HomeMixins } from '@/utils/mixins' export default { name: 'homeMain', mixins: [HomeMixins], data() { return { options: { observeDOM: true, click: true, probeType: 3, scrollbar: false, pullDownRefresh: false, pullUpLoad: false } } }, methods: { onScrollHandle(pos) { // X 偏移量存入 vuex this.setScrollY(pos.y) } }, components: { SearchBar }, } </script> <style scoped lang="stylus"> .home-main width 100% height 100% overflow hidden </style> ~~~ ***** * [ ] searchBar ~~~ <template> <div class="search-bar" :class="{'hide-title': !titleVisible, 'hide-shadow': !titleShadow}"> <!-- 頭部導航條 --> <transition name="title-move"> <div class="header-wrapper" v-show="titleVisible"> <div class="search-center"> <span class="search-text text">書城</span> </div> <div class="search-right"> <i class="icon-shake icon"></i> </div> </div> </transition> <!-- 左邊返回按鈕 --> <div class="search-back" :class="{'hide-title': !titleVisible}"> <i class="icon-back icon"></i> </div> <!-- 搜索條 --> <div class="search-wrapper" :class="{'hide-title': !titleVisible}"> <!-- 留白寬度 : 圖標寬度: 16px + position-left: 15px = 31px --> <div class="search-blank" :class="{'hide-title': !titleVisible}"></div> <!-- 搜索內容條 --> <div class="search-input-wrapper"> <i class="icon-search icon"></i> <input type="text" class="text" v-model="searchContent" placeholder="請輸入搜索內容"> </div> </div> </div> </template> <script type="text/ecmascript-6"> import { HomeMixins } from '@/utils/mixins' export default { name: "SearchBar", mixins: [HomeMixins], data() { return { searchContent: '', titleVisible: true, titleShadow: false } }, watch: { scrollY(newVal) { if (newVal < 0) { // 下拉 隱藏標題 this.hideTitle() // 下拉 顯示陰影 this.showShadow() } else { // 上拉 顯示標題 this.showTitle() // 上拉 隱藏陰影 this.hideShadow() } } }, methods: { // 顯示標題 showTitle() { this.titleVisible = true }, // 隱藏標題 hideTitle() { this.titleVisible = false }, // 隱藏陰影 hideShadow() { this.titleShadow = false }, // 顯示陰影 showShadow() { this.titleShadow = true } } } </script> <style lang="stylus" rel="stylesheet/stylus" scoped> .search-bar width 100% height 94px z-index 9999 box-shadow 0 2px 2px 0 rgba(0,0,0,.1) &.hide-shadow box-shadow none &.hide-title height 52px .header-wrapper position absolute top 0 left 0 width 100% height 42px .search-right position absolute top 0 right 15px height 100% display flex align-items center justify-content center .search-center width 100% height 100% display flex align-items center justify-content center .search-back position absolute left 15px top 0 height 42px display flex align-items center justify-content center transition height .2s linear &.hide-title height 52px .search-wrapper position absolute left 0 top 42px width 100% height 52px padding 10px display flex transition top .2s linear &.hide-title top 0 .search-blank flex 0 0 0 width 0 transition all .2s linear &.hide-title flex 0 0 31px width 31px .search-input-wrapper flex 1 width 100% border-radius 20px background-color: #f4f4f4; display flex justify-content flex-start align-items center padding 5px 15px border 1px solid #eee input width 100% height 22px background-color: transparent; color #666 font-size 12px margin-left 10px &:focus outline none &::-webkit-input-placeholder color #ccc font-weight normal </style> ~~~