• Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）

    Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）

    目录

    Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）

    一、简单介绍

    二、环境

    三、效果预览

    四、项目的页面结构

    五、项目主要插件

    六、项目实现过程

    七、router路由管理， store vuex 状态管理 说明

    八、几个性能优化点说明

    九、axios 获取服务端数据说明

    十、src/common 的共有 vue 

    十一、src/assets/styles 存放css 样式、常用的变量样式参数等

     十二、该仿去哪儿网的演示项目源码下载

    一、简单介绍

    Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

    本节介绍，Vue 开发的实例实战，模仿开发去哪儿网的几个页面 ，体验 Vue 在实战中应用，欢迎指出，或者你有更好的方法，欢迎留言。

    二、环境

    1、vue  2.5.2

    2、vue-router 3.0.1

    3、vuex 3.0.1

    三、效果预览

    四、项目的页面结构

    五、项目主要插件

     

    六、项目实现过程

    1、环境构建，并且 vue init webpack xxx_工程名，根据提示创建工程

    具体环境搭建过程：Web 前端 之 Vue webpack 环境的搭建及工程创建简单整理_仙魁XAN的博客-CSDN博客

    2、工程文件目录结构如下

    3、安装依赖，如果下面的一些依赖没有安装，可以对应使用 npm install 插件名@版本号 --save 先安装插件包

    4、src 开发文件结构说明

    5、在 main.js 中引入 reset.css 用作重置浏览器标签的样式表，统一样式，border.css 移动端1像素边框，fastclick 解决移动端click事件延迟300ms和点击穿透问题，vue-awesome-swiper 全局轮播组件设置，babel-polyfill 解决部分手机白屏问题

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. import App from './App'
    5. import router from './router'
    6. /*
    7. //reset.css是重置浏览器标签的样式表，其作用就是重新定义标签样式，覆盖浏览器的CSS默认属性，也就是指把浏览器提供的默认样式覆盖掉。
    8. //
    9. //在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。
    10. //
    11. //所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
    12. */
    13. import 'styles/reset.css'
    14. import 'styles/iconfont.css'
    15.  
    16. /*
    17. //该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。
    18. */
    19. import 'styles/border.css'
    20.  
    21. // fastclick 解决移动端click事件延迟300ms和点击穿透问题
    22. import fastClick from 'fastclick'
    23. // 轮播图插件
    24. import VueAwesomeSwiper from 'vue-awesome-swiper'
    25. import 'swiper/dist/css/swiper.css'
    26.  
    27. import store from './store/index'
    28.  
    29. // 解决部分手机白屏问题
    30. import "babel-polyfill"
    31.  
    32. fastClick.attach(document.body)
    33. Vue.config.productionTip = false
    34. // 全局使用轮播图插件
    35. Vue.use(VueAwesomeSwiper)
    36.  
    37. /* eslint-disable no-new */
    38. new Vue({
    39.   el: '#app',
    40.   router,
    41.   store,
    42.   components: { App },
    43.   template: '<App/>'
    44. })

    6、App.vue 中的 <router-view/> 用于显示路由切换的界面，<keep-alive exclude="Detail"> 标签，作用是缓存 vue ，执行一次 mounted ，exclude 的 vue 则不做缓存

    1. <template>
    2.   <div id="app">
    3.     <!--缓存数据，执行一次 mounted  ，exclude 不包括-->
    4.     <keep-alive exclude="Detail">
    5.       <router-view/>
    6.     </keep-alive>
    7.   </div>
    8. </template>
    9.  
    10. <script>
    11. export default {
    12.   name: 'App'
    13. }
    14. </script>
    15.  
    16. <style>
    17. </style>
     

    7、pages 是三个路由界面，以及路由界面里面的拆分页面，拆分的目的也是把复杂的界面简单化
     

     

     

    8、 Home 界面，包含 5 个拆分页面，Home.vue 主要功能是，从 store 中获取 城市信息，然后axios.get 获取数据，把数据传递给各个子页面，
     

    1. <template>
    2.     <div>
    3.       <!--:city='city' 数据向子组件传递-->
    4.      <home-header></home-header>
    5.      <home-swiper :list="swiperList"></home-swiper>
    6.       <home-icons :list="iconsList"></home-icons>
    7.       <home-recommend :list="recommendsList"></home-recommend>
    8.       <home-weekend :list="weekendsList"></home-weekend>
    9.     </div>
    10. </template>
    11.  
    12. <script>
    13. import HomeHeader from './components/Header'
    14. import HomeSwiper from './components/Swiper.vue'
    15. import HomeIcons from './components/Icons.vue'
    16. import HomeRecommend from './components/Recommend.vue'
    17. import HomeWeekend from './components/Weekend.vue'
    18.  
    19. // 获取网络数据
    20. import axios from 'axios'
    21. import {mapState} from 'vuex'
    22.  
    23. export default {
    24.   name: 'Home',
    25.   components: {
    26.     HomeHeader,
    27.     HomeSwiper,
    28.     HomeIcons,
    29.     HomeRecommend,
    30.     HomeWeekend
    31.   },
    32.   data (){
    33.   return{
    34.     swiperList:[],
    35.     iconsList:[],
    36.     recommendsList:[],
    37.     weekendsList:[],
    38.     lastCity:'',
    39.   }
    40.  
    41.   },
    42. computed:{
    43. ...mapState(['city'])
    44. },
    45.   methods:{
    46.     getHomeInfo(){
    47.       axios.get('/api/index.json?city='+this.city).then(this.getHomeInfoSucc)
    48.     },
    49.     getHomeInfoSucc(res){
    50.       console.log(res)
    51.       const result = res.data.ret
    52.       if(result && res.data.data){
    53.         const data = res.data.data
    54.         this.swiperList = data.swiperList
    55.         this.iconsList = data.iconsList
    56.         this.recommendsList = data.recommendsList
    57.         this.weekendsList = data.weekendsList
    58.  
    59.       }
    60.     },
    61.   },
    62.  
    63.   mounted(){
    64.     this.lastCity = this.city
    65.     this.getHomeInfo()
    66.   },
    67.   activated(){
    68.     if(this.lastCity !== this.city){
    69.       this.lastCity = this.city
    70.       this.getHomeInfo()
    71.     }
    72.   },
    73. }
    74. </script>
    75.  
    76. <!-- Add "scoped" attribute to limit CSS to this component only -->
    77. <style>
    78.     * {
    79.         margin: 0px;
    80.         padding: 0px;
    81.     }
    82. </style>
     

    9、Home 界面中的 Header ，包含输入框，显示当前城市，点击城市可以跳转到城市选择界面

     

    1. <template>
    2.     <div class="header">
    3.       <div class="header-left">
    4.         <div class="iconfont back-icon">&#xe624;</div>
    5.       </div>
    6.       <div class="header-input">
    7.         <span class="iconfont">&#xe632;</span>
    8.         输入城市/景点/游玩主题</div>
    9.       <router-link to="/city">
    10.       <div class="header-right">{{this.city}}
    11.       <span class="iconfont arrow-icon">&#xe64a;</span>
    12.       </div>
    13.       </router-link>
    14.     </div>
    15. </template>
    16.  
    17. <script>
    18.   // 映射属性
    19.   import {mapState} from 'vuex'
    20.  
    21. export default {
    22.   name: 'HomeHeader',
    23. //  接收父组件的数据
    24.   props:{
    25.   },
    26.   computed :{
    27.     ...mapState(['city'])
    28.   },
    29.   data: function(){
    30.     return {}
    31.   }
    32. }
    33. </script>
    34.  
    35. <!-- Add "scoped" attribute to limit CSS to this component only -->
    36. <style lang="stylus" scoped>
    37.   @import "~styles/varibles.styl";
    38.   .header{
    39.     display: flex;
    40.     line-height: $headerHeight;
    41.     background: $bgColor;
    42.     color: #ffffff;
    43.   }
    44.   .header .header-left{
    45.     width: 0.64rem;
    46.     float: left;
    47.   }
    48.   .header .header-left .back-icon {
    49.     text-align: center;
    50.     font-size: 0.4rem;
    51.   }
    52.   .header .header-input{
    53.     flex: 1;
    54.     background: #fff;
    55.     border-radius: 0.1rem;
    56.     margin-top: 0.12rem;
    57.     margin-left: 0.2rem;
    58.     padding-left: 0.2rem;
    59.     height: 0.64rem;
    60.     line-height: 0.64rem;
    61.     color: #ccc;
    62.   }
    63.   .header .header-right{
    64.     min-width: 1.04rem;
    65.     padding: 0 .1rem;
    66.     float: right;
    67.     text-align: center;
    68.     color:white;
    69.  
    70.   }
    71.  
    72.   .header .header-right .arrow-icon{
    73.     margin-left: -0.04rem;
    74.     font-size: 0.24rem;
    75.  
    76.   }
    77.  
    78. </style>
     

    10、Home 界面中的 Swiper 是一个轮播组件，轮播图片
     

    1. <template>
    2.     <div class="wrapper">
    3.       <swiper :options="swiperOption" v-if="showSwiper">
    4.         <swiper-slide v-for="item of list" :key="item.id">
    5.           <img class="swiper-img" :src="item.url">
    6.         </swiper-slide>
    7.         <div class="swiper-pagination" slot="pagination"></div>
    8.       </swiper>
    9.     </div>
    10. </template>
    11.  
    12. <script>
    13. export default {
    14.   name: 'HomeSwiper',
    15.   props:{
    16.     list:Array
    17.   },
    18.   data: function () {
    19.     return {
    20.       swiperOption: {
    21.         // 下面的圆点
    22.         pagination:'.swiper-pagination',
    23.         // 循环轮播
    24.         loop:true
    25.       },
    26.     }
    27.   },
    28.   computed:{
    29.     showSwiper(){
    30.       return this.list.length
    31.     }
    32.   }
    33. }
    34. </script>
    35.  
    36. <!-- Add "scoped" attribute to limit CSS to this component only -->
    37. <style lang="stylus" scoped>
    38.   // >>> （scoped 阻挡后 >>>穿透 ）
    39.   .wrapper >>> .swiper-pagination-bullet{
    40.     background: #fff;
    41.   }
    42.   .wrapper{
    43.     width: 100%;
    44.     height: 0;
    45.     padding-bottom: 30.45%;
    46.     background: #eee;
    47.   }
    48.     .swiper-img{
    49.       width: 100%;
    50.     }
    51. </style>
     

     

    11、Home 界面中的 Icons ，显示icon图标组
     

    1. <template>
    2.     <div class="icons">
    3.       <swiper :options="swiperOption">
    4.         <swiper-slide v-for="(page, indexPage) of pages" :key="indexPage">
    5.       <div class="icon" v-for="item of page" :key="item.id">
    6.         <div class="icon-img">
    7.           <img class="icon-img-content" :src="item.imgUrl">
    8.         </div>
    9.         <p class="icon-desc">{{item.desc}}</p>
    10.       </div>
    11.         </swiper-slide>
    12.         </swiper>
    13.     </div>
    14.  
    15. </template>
    16.  
    17. <script>
    18.     export default {
    19.         name: 'HomeIcons',
    20.       props:{
    21.         list:Array
    22.       },
    23.         data: function () {
    24.             return {
    25.               swiperOption:{
    26.                 autoplay:false
    27.               }
    28.             }
    29.         },
    30.  
    31.   computed:{
    32.     pages (){
    33.       const pages = []
    34.       this.list.forEach((item, index) =>{
    35.       const page = Math.floor(index/8)
    36.       if(pages[page]==null){
    37.         pages[page]=[]
    38.       }
    39.       pages[page].push(item)
    40.       })
    41.       return pages
    42.       }
    43.     }
    44.   }
    45. </script>
    46.  
    47. <!-- Add "scoped" attribute to limit CSS to this component only -->
    48. <style lang="stylus" scoped>
    49.   @import "~styles/varibles.styl";
    50.   @import "~styles/mixins.styl";
    51.   .icons >>> .swiper-wrapper{
    52.     height: 0;
    53.     padding-bottom: 50%;
    54.   }
    55.   .icons{
    56.     margin-top: 0.2rem;
    57.   }
    58.   .icons .icon{
    59.     position: relative;
    60.     overflow: hidden;
    61.     float: left;
    62.     width: 25%;
    63.     padding-bottom: 25%;
    64.   }
    65.   .icons .icon .icon-img{
    66.     position: absolute;
    67.     top: 0;
    68.     left: 0;
    69.     right: 0;
    70.     bottom: .44rem;
    71.   }
    72.   .icons .icon .icon-img .icon-img-content{
    73.     height: 90%;
    74.     display: block;
    75.     margin: 0 auto;
    76.   }
    77.   .icons .icon .icon-desc{
    78.     position: absolute;
    79.     left: 0;
    80.     right: 0;
    81.     bottom: 0;
    82.     height: .44rem;
    83.     line-height: .44rem;
    84.     color: $darkTextColor;
    85.     text-align: center;
    86.     font-size: 0.2rem;
    87.     /*文字过多，则 ... 显示*/
    88.     ellipsis()
    89.  
    90.   }
    91. </style>
     

    12、Home 界面中的 Recommend，热门推荐，点击可以跳转到热门推荐的详情界面
     

    1. <template>
    2.     <div>
    3.       <div class="title">热门推荐</div>
    4.       <ul class="item-wrapper">
    5.         <!--border-bottom 每个下面有线-->
    6.         <router-link tag="li" class="item border-bottom"
    7.             v-for="item of list"
    8.             :key="item.id"
    9.             :to="/detail/ + item.id"
    10.           >
    11.           <img class="item-img" :src="item.imgUrl">
    12.           <div class="item-info">
    13.             <p class="item-title">{{item.title}}</p>
    14.             <p class="item-desc">{{item.desc}}</p>
    15.             <button class="item-button">查看详情</button>
    16.           </div>
    17.         </router-link>
    18.       </ul>
    19.     </div>
    20. </template>
    21.  
    22. <script>
    23.     export default {
    24.         name: 'HomeRecommend',
    25.       props:{
    26.         list:Array
    27.       },
    28.         data: function () {
    29.             return {
    30.  
    31.             }
    32.         }
    33.     }
    34. </script>
    35.  
    36. <!-- Add "scoped" attribute to limit CSS to this component only -->
    37. <style lang="stylus" scoped>
    38.   @import "~styles/mixins.styl";
    39.   .title{
    40.     margin-top: 0.2rem;
    41.     line-height: 0.8rem;
    42.     background: #eee;
    43.     text-indent: 0.2rem;
    44.   }
    45.   .item-wrapper{
    46.     padding: 0.15rem;
    47.   }
    48.   .item{
    49.     overflow: hidden;
    50.     display: flex;
    51.     height: 1.9rem;
    52.   }
    53.   .item .item-info{
    54.     flex:1;
    55.     padding: 0.1rem;
    56.     /*让 ellipsis() 生效*/
    57.     min-width: 0;
    58.   }
    59.   .item .item-img {
    60.     width: 1.7rem;
    61.     height: 1.7rem;
    62.     padding: 0.1rem;
    63.   }
    64.   .item .item-info .item-title{
    65.     line-height: 0.54rem;
    66.     font-size: .32rem;
    67.     ellipsis()
    68.   }
    69.   .item .item-info .item-desc{
    70.     line-height: 0.4rem;
    71.     color: #ccc;
    72.     ellipsis()
    73.   }
    74.   .item .item-info .item-button{
    75.     line-height: .44rem;
    76.     margin-top: 0.2rem;
    77.     background: #ff9300;
    78.     padding: 0 0.2rem;
    79.     border-radius: 0.06rem;
    80.     color: #fff;
    81.   }
    82. </style>
     

    13、Home 界面中的 Weekend，周末去哪页面
     

    1. <template>
    2.     <div>
    3.       <div class="title">周末去哪儿</div>
    4.       <ul class="item-wrapper">
    5.         <!--border-bottom 每个下面有线-->
    6.         <li class="item border-bottom" v-for="item of list" :key="item.id">
    7.           <img class="item-img" :src="item.imgUrl">
    8.           <div class="item-info">
    9.             <p class="item-title">{{item.title}}</p>
    10.             <p class="item-desc">{{item.desc}}</p>
    11.           </div>
    12.         </li>
    13.       </ul>
    14.     </div>
    15. </template>
    16.  
    17. <script>
    18.     export default {
    19.         name: 'HomeWeekend',
    20.       props:{
    21.       list:Array
    22.     },
    23.         data: function () {
    24.             return {}
    25.         }
    26.     }
    27. </script>
    28.  
    29. <!-- Add "scoped" attribute to limit CSS to this component only -->
    30. <style lang="stylus" scoped>
    31.   @import "~styles/mixins.styl";
    32.   .title{
    33.     line-height: 0.8rem;
    34.     background: #eee;
    35.     text-indent: 0.2rem;
    36.   }
    37.   .item-wrapper{
    38.     padding: 0.15rem;
    39.   }
    40.   .item {
    41.     overflow: hidden;
    42.     height: 0;
    43.     padding-bottom: 47%;
    44.   }
    45.   .item .item-img {
    46.     width: 100%;
    47.   }
    48.   .item .item-info .item-title{
    49.     line-height: 0.54rem;
    50.     font-size: .32rem;
    51.     ellipsis()
    52.   }
    53.   .item .item-info .item-desc{
    54.     line-height: 0.4rem;
    55.     font-size: 0.2rem;
    56.     color: #ccc;
    57.     ellipsis()
    58.   }
    59. </style>
     

     

    14、 City 界面，包含 4 个拆分页面，City.vue 主要功能是，axios.get 获取数据，以及获取 Alphabet传递的数据，对应把数据传递给各个子页面
     

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.     <city-search :cities="cities"></city-search>
    5.     <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    6.     <city-alphabet :cities="cities" @change="handleAlphabetEvent"></city-alphabet>
    7.   </div>
    8. </template>
    9.  
    10. <script>
    11.   import CityHeader from './components/Header.vue'
    12.   import CitySearch from './components/Search.vue'
    13.   import CityList from './components/List.vue'
    14.   import CityAlphabet from './components/Alphabet.vue'
    15.   import axios from 'axios'
    16.   export default {
    17.     name: 'City',
    18.     components:{
    19.       CityHeader,
    20.       CitySearch,
    21.       CityList,
    22.       CityAlphabet,
    23.     },
    24.     data: function () {
    25.       return {
    26.         cities:{},
    27.         hotCities:[],
    28.         letter:''
    29.       }
    30.     },
    31.  
    32.     methods:{
    33.       getCityInfo(){
    34.         axios.get('/api/city.json').then(this.getCityInfoSucc)
    35.       },
    36.  
    37.       getCityInfoSucc(res){
    38.         res = res.data
    39.         if(res.ret && res.data){
    40.           const data = res.data
    41.           this.cities = data.cities
    42.           this.hotCities = data.hotCities
    43.           console.log(res)
    44.         }
    45.       },
    46.  
    47.       handleAlphabetEvent(alpha){
    48.         this.letter = alpha
    49.       }
    50.     },
    51.   mounted(){
    52.     this.getCityInfo()
    53.   }
    54.   }
    55. </script>
    56.  
    57. <!-- Add "scoped" attribute to limit CSS to this component only -->
    58. <style>
    59.  
    60. </style>
     

    15、City 界面中的 Header，包含标题，以及返回键，点击回到 Home 界面

     

    1. <template>
    2.     <div class="header">
    3.       城市选择
    4.       <router-link to="/">
    5.       <div class="iconfont back-icon">&#xe624;</div>
    6.       </router-link>
    7.     </div>
    8. </template>
    9.  
    10. <script>
    11. export default {
    12.   name: 'CityHeader',
    13.   data: function () {
    14.     return {
    15.       msg: 'Welcome to Your Vue.js App'
    16.     }
    17.   }
    18. }
    19. </script>
    20.  
    21. <!-- Add "scoped" attribute to limit CSS to this component only -->
    22. <style lang="stylus" scoped>
    23.   @import "~styles/varibles.styl";
    24.   .header{
    25.     position: relative;
    26.     overflow: hidden;
    27.     height: $headerHeight;
    28.     line-height: $headerHeight;
    29.     background: $bgColor;
    30.     color: #ffffff;
    31.     text-align: center;
    32.     font-size: 0.4rem;
    33.   }
    34.  
    35.   .header .back-icon{
    36.     position: absolute;
    37.     top:0;
    38.     left: 0;
    39.     width: 0.64rem;
    40.     text-align: center;
    41.     font-size: 0.4rem;
    42.     color: white;
    43.   }
    44.  
    45.  
    46. </style>
     

    16、City 界面中的 Search，包含输入框，以及搜索出城市的列表，和没有匹配数据的提示；其中搜索功能是在watch 中监听输入的变化，进行在城市名字和拼音中是否包含，添加到结果中去，从而实现搜索功能

     

    1. <template>
    2.   <div>
    3.     <div class="search">
    4.       <input v-model="keyword" class="search-input" placeholder="输入城市">
    5.     </div>
    6.     <div v-show="keyword" class="search-content" ref="search">
    7.       <ul>
    8.         <li class="search-item border-bottom"
    9.             v-for="item of list"
    10.             :ket="item.id"
    11.             @click="handleClickCity(item.name)"
    12.           >
    13.           {{item.name}}</li>
    14.         <li class="search-item border-bottom" v-show="hasNoData">没有匹配数据</li>
    15.       </ul>
    16.     </div>
    17.   </div>
    18. </template>
    19.  
    20. <script>
    21.   import BScroll from 'better-scroll'
    22.   import {mapActions} from 'vuex'
    23. export default {
    24.   name: 'CitySearch',
    25.   props:{
    26.     cities:Object
    27.   },
    28.   data: function () {
    29.     return {
    30.       keyword:'',
    31.       list:[],
    32.       timer:null
    33.     }
    34.   },
    35.   watch:{
    36.     keyword(){
    37.     console.log('sdd')
    38.       // 控制执行频率，提高性能
    39.       if(this.timer){
    40.         clearTimeout(this.timer)
    41.       }
    42.       this.timer = setTimeout(()=>{
    43.  
    44.         if(!this.keyword){
    45.           this.list = []
    46.           return
    47.         }
    48.  
    49.       const result = []
    50.         for(let i in this.cities){
    51.           this.cities[i].forEach((value)=>{
    52.             if(value.spell.indexOf(this.keyword) > -1
    53.               || value.name.indexOf(this.keyword)> -1){
    54.  
    55.               result.push(value)
    56.             }
    57.           })
    58.         }
    59.       this.list = result
    60.       console.log('this.scroll ', this.scroll)
    61.         setTimeout(()=>{
    62.         this.scroll.refresh()
    63.       },10)
    64.       },100)
    65.     }
    66.   },
    67.   computed:{
    68.     hasNoData(){
    69.  
    70.       return this.list.length==0
    71.     }
    72.   },
    73.   methods:{
    74.     handleClickCity(city){
    75.       this.changeCity(city)
    76.       this.$router.push('/')
    77.     },
    78.   ...mapActions(['changeCity'])
    79.   },
    80.   mounted(){
    81.     this.scroll = new BScroll(this.$refs.search,{click:true})
    82.   }
    83. }
    84. </script>
    85.  
    86. <!-- Add "scoped" attribute to limit CSS to this component only -->
    87. <style lang="stylus" scoped>
    88.   @import "~styles/varibles.styl";
    89.   .search{
    90.     height: 0.72rem;
    91.     padding: 0 0.1rem;
    92.     background: $bgColor;
    93.   }
    94.  
    95.   .search .search-input{
    96.     box-sizing: border-box;
    97.     padding: 0 0.1rem;
    98.     width: 100%;
    99.     height: 0.62rem;
    100.     line-height: 0.62rem;
    101.     border-radius: 0.06rem;
    102.     text-align: center;
    103.     color: #777;
    104.   }
    105.   .search-content{
    106.     z-index: 1;
    107.     position: absolute;
    108.     overflow: hidden;
    109.     top:1.58rem;
    110.     bottom: 0;
    111.     right: 0;
    112.     left: 0;
    113.     background: #eee;
    114.   }
    115.  
    116.   .search-content .search-item{
    117.     line-height: 0.62rem;
    118.     padding-left: 0.2rem;
    119.     background: #fff;
    120.   }
    121.  
    122.  
    123. </style>
     

    17、City 界面中的 List，包含当前城市，热门城市，以及以首字母排列的城市列表，点击热门城市，以及城市列表的城市，都会跳转到对应城市的 Home 界面

     

    1. <template>
    2.     <div class="list" ref="wrapper">
    3.       <div>
    4.         <div class="area">
    5.           <div class="title border-topbottom">当前城市</div>
    6.           <div class="button-list">
    7.             <div class="button-wrapper">
    8.               <div class="button">{{this.currentCity}}</div>
    9.             </div>
    10.           </div>
    11.         </div>
    12.         <div class="area">
    13.           <div class="title border-topbottom">热门城市</div>
    14.           <div class="button-list">
    15.             <div class="button-wrapper"
    16.                  v-for="item of hot"
    17.                  :key="item.id"
    18.                  v-on:click="handleClickCity(item.name)"
    19.               >
    20.               <div class="button">{{item.name}}</div>
    21.             </div>
    22.           </div>
    23.         </div>
    24.         <div class="area" v-for="(items,key) of cities" :key="key" :ref="key">
    25.           <div class="title border-topbottom">{{key}}</div>
    26.           <div class="item-list">
    27.             <div class="item border-bottom"
    28.                  v-for="item of items"
    29.                  :key="item.id"
    30.                  v-on:click="handleClickCity(item.name)"
    31.               >
    32.               {{item.name}}</div>
    33.           </div>
    34.         </div>
    35.       </div>
    36.     </div>
    37. </template>
    38.  
    39. <script>
    40.   import BScroll from 'better-scroll'
    41.   import {mapState, mapActions} from 'vuex'
    42. export default {
    43.   name: 'CityList',
    44.   props:{
    45.     hot:Array,
    46.     cities:Object,
    47.     letter:String
    48.   },
    49.   data: function () {
    50.     return {
    51.     }
    52.   },
    53.   computed:{
    54.     ...mapState({
    55.     currentCity:'city'
    56.   })
    57.   },
    58.   watch:{
    59.     letter(){
    60.       if(!this.letter.isEmpty){
    61.         // 监听字母点击，跳转
    62.         console.log(this.letter)
    63.         const element = this.$refs[this.letter][0]
    64.         console.log(element)
    65.         this.scroll.scrollToElement(element)
    66.       }
    67.     }
    68.   },
    69.  
    70.   methods:{
    71.     handleClickCity(city){
    72.       this.changeCity(city)
    73.       this.$router.push('/')
    74.     },
    75.     ...mapActions(['changeCity'])
    76.   },
    77.   mounted(){
    78.     // 城市数据先创建，然后在 scroll 不能可能 scroll 在没有数据的时候构建，从而使得scroll无法滚动
    79.     setTimeout(()=>{
    80.       this.scroll = new BScroll(this.$refs.wrapper,{click:true})
    81.       console.log(' this.scroll ',this.scroll)
    82.     },100)
    83.  
    84.   },
    85. }
    86. </script>
    87.  
    88. <!-- Add "scoped" attribute to limit CSS to this component only -->
    89. <style lang="stylus" scoped>
    90.   @import "~styles/varibles.styl";
    91.  
    92.   .list{
    93.     overflow: hidden;
    94.     position: absolute;
    95.     top:1.58rem;
    96.     bottom:0;
    97.     left:0;
    98.     right:0;
    99.   }
    100.   .border-topbottom::before{
    101.     border-color: #ccc;
    102.   }
    103.   .border-topbottom::after{
    104.     border-color: #ccc;
    105.   }
    106.   .border-bottom::before{
    107.     border-color: #ccc;
    108.   }
    109. .title{
    110.   padding-left: 0.2rem;
    111.   background: #eee;
    112.   color: #666;
    113.   line-height: 0.44rem;
    114.   font-size: 0.24rem;
    115. }
    116.   .button-list{
    117.     overflow: hidden;
    118.     padding: 0.1rem 0.6rem 0.1rem 0.1rem;
    119.   }
    120.   .button-list .button-wrapper{
    121.     width: 33.33%;
    122.     float: left;
    123.   }
    124.   .button-list .button-wrapper .button{
    125.     margin: 0.1rem;
    126.     padding: 0.1rem 0;
    127.     border: 0.02rem solid #ccc;
    128.     text-align: center;
    129.     border-radius: 0.06rem;
    130.   }
    131.   .item-list .item{
    132.     line-height: 0.76rem;
    133.     padding-left: 0.2rem;
    134.   }
    135.  
    136. </style>
     

    18、City 界面中的 Alphabet，包含所有城市列表的首字母组成的列表，其中通过touch的位置计算出当前选择的哪个字母，传递给 City,City 在传递给 List ，显示对应首字母城市列表
     

    1. <template>
    2.     <div class="alphabet">
    3.       <ul>
    4.         <li class="item"
    5.             v-for="item of letters"
    6.             @click="handleOnClick"
    7.             @touchstart.prevent="handleTouchStart"
    8.             @touchmove="handleTouchMove"
    9.             @touchend="handleTouchEnd"
    10.             :ref="item"
    11.           >{{item}}</li>
    12.       </ul>
    13.     </div>
    14. </template>
    15.  
    16. <script>
    17. export default {
    18.   name: 'CityAlphabet',
    19.   props:{
    20.     cities:Object
    21.   },
    22.   data: function () {
    23.     return {
    24.       touchStatus:false,
    25.       aStartY:0,
    26.       // 性能优化
    27.       timer:null
    28.     }
    29.   },
    30.   computed:{
    31.     letters(){
    32.       const letters =[]
    33.       for(let i in this.cities){
    34.         letters.push(i)
    35.       }
    36.       return letters
    37.     }
    38.   },
    39.   updated(){
    40.     this.aStartY = this.$refs['A'][0].offsetTop
    41.   },
    42.  
    43.   methods:{
    44.     handleOnClick(e){
    45.       this.$emit('change', e.target.innerText)
    46.     },
    47.     handleTouchStart(){
    48.       this.touchStatus =true
    49.     },
    50.     handleTouchMove(e){
    51.       if(this.touchStatus){
    52.         if(this.timer){
    53.           clearTimeout(this.timer)
    54.         }
    55.         // 控制执行频率，从而提升性能
    56.         this.timer = setTimeout(()=>{
    57.           // 75 是上面城市 和 输入城市元素的 Y 总和
    58.           const touchY = e.touches[0].clientY - 75
    59.           // 20 是 字母 元素的 Y 值
    60.           const index = Math.floor((touchY - this.aStartY) / 20)
    61.           if(index >= 0 && index < this.letters.length){
    62.             this.$emit('change',this.letters[index])
    63.           }
    64.         }, 16)
    65.  
    66.       }
    67.     },
    68.     handleTouchEnd(){
    69.       this.touchStatus =false
    70.     },
    71.  
    72.   }
    73. }
    74. </script>
    75.  
    76. <!-- Add "scoped" attribute to limit CSS to this component only -->
    77. <style lang="stylus" scoped>
    78.   @import "~styles/varibles.styl";
    79.  
    80. .alphabet{
    81.   position: absolute;
    82.   top: 1.58rem;
    83.   right: 0;
    84.   bottom: 0;
    85.   width: 0.4rem;
    86.   display: flex;
    87.   flex-direction: column;
    88.   justify-content: center;
    89. }
    90.   .alphabet .item{
    91.     color: $bgColor;
    92.     text-align: center;
    93.     line-height: 0.4rem;
    94.   }
    95.  
    96. </style>
     

    19、 Detail界面，包含 3 个拆分页面，Detail.vue 主要功能是，axios.get 获取数据，对应把数据传递给各个子页面
     

    1. <template>
    2.   <div class="detail">
    3.     <detail-banner
    4.       :sightName="sightName"
    5.       :bannerImg="bannerImg"
    6.       :gallaryImgs="gallaryImgs"
    7.       ></detail-banner>
    8.     <detail-header></detail-header>
    9.     <div class="content">
    10.       <detail-list :list="list"></detail-list>
    11.     </div>
    12.   </div>
    13. </template>
    14.  
    15. <script>
    16.   import DetailBanner from './components/Banner.vue'
    17.   import DetailHeader from './components/Header.vue'
    18.   import DetailList from './components/List.vue'
    19.   import axios from 'axios'
    20.   export default {
    21.     name: 'Detail',
    22.     components:{
    23.       DetailBanner,
    24.       DetailHeader,
    25.       DetailList,
    26.     },
    27.     data: function () {
    28.       return {
    29.         sightName:'',
    30.         bannerImg:'',
    31.         gallaryImgs:[],
    32.         list: []
    33.       }
    34.     },
    35.     methods:{
    36.       getDetailInfo() {
    37. //        axios.get('/api/detail.json?id='+this.$route.params.id)
    38.         axios.get('/api/detail.json',{
    39.           params:{
    40.             id: this.$route.params.id
    41.           }
    42.         }).then(this.handleGetDataSucc)
    43.  
    44.       },
    45.        handleGetDataSucc(res){
    46.         res = res.data
    47.         if(res.ret && res.data){
    48.           const data = res.data
    49.           this.sightName = data.sightName
    50.           this.bannerImg = data.bannerImg
    51.           this.gallaryImgs = data.gallaryImgs
    52.           this.list = data.categoryList
    53.         }
    54.       }
    55.     },
    56.  
    57.     mounted(){
    58.       this.getDetailInfo()
    59.     }
    60.   }
    61. </script>
    62.  
    63. <!-- Add "scoped" attribute to limit CSS to this component only -->
    64. <style lang="stylus" scoped>
    65.   .content{
    66.     height: 20rem;
    67.   }
    68. </style>
     

    20、Detail 界面中的 Banner ，包含一个图片展示，以及一个图片集轮播组件（默认隐藏）；其中点击图片，就会显示图片集轮播
     

    1. <template>
    2.   <div>
    3.     <div class="banner" @click="onClickBanner">
    4.       <img class="banner-img" :src="bannerImg"/>
    5.       <div class="banner-info">
    6.         <div class="banner-title">{{this.sightName}}</div>
    7.         <div class="banner-number"><span class="iconfont banner-icon">&#xe692;</span>78</div>
    8.       </div>
    9.     </div>
    10.     <fade-animation>
    11.       <common-gallary
    12.         :imgs="gallaryImgs"
    13.         @close="handleGallaryClose"
    14.         v-show="isShowGallary"
    15.         ></common-gallary>
    16.     </fade-animation>
    17.   </div>
    18. </template>
    19.  
    20. <script>
    21.   import CommonGallary from 'common/gallary/Gallary'
    22.   import FadeAnimation from 'common/fade/FadeAnimation'
    23.   export default {
    24.     name: 'DetailBanner',
    25.     props:{
    26.       sightName:String,
    27.       bannerImg:String,
    28.       gallaryImgs:Array,
    29.     },
    30.     components:{
    31.       CommonGallary,
    32.       FadeAnimation,
    33.     },
    34.     data: function () {
    35.       return {
    36.         isShowGallary: false,
    37.       }
    38.     },
    39.     methods:{
    40.       onClickBanner(){
    41.         this.isShowGallary = true
    42.         },
    43.       handleGallaryClose(){
    44.         this.isShowGallary = false
    45.       },
    46.     },
    47.   }
    48. </script>
    49.  
    50. <!-- Add "scoped" attribute to limit CSS to this component only -->
    51. <style lang="stylus" scoped>
    52.   .banner{
    53.     position: relative;
    54.     overflow: hidden;
    55.     height: 0;
    56.     padding-bottom: 50%;
    57.     background: green;
    58.   }
    59.  
    60.   .banner .banner-img{
    61.     width: 100%;
    62.   }
    63.  
    64.   .banner .banner-info{
    65.     display: flex;
    66.     position: absolute;
    67.     left: 0;
    68.     right: 0;
    69.     bottom: 0;
    70.     line-height: 0.6rem;
    71.     color: #fff;
    72.     background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));
    73.    }
    74.  
    75.   .banner .banner-info .banner-title{
    76.     flex: 1;
    77.     font-size: 0.32rem;
    78.     padding: 0 0.2rem;
    79.   }
    80.  
    81.   .banner .banner-info .banner-number{
    82.     height: 0.32rem;
    83.     line-height: 0.32rem;
    84.     padding: 0 0.4rem;
    85.     margin-top: 0.14rem;
    86.     border-radius: 0.2rem;
    87.     background: rgba(0,0,0,0.8);
    88.     font-size: 0.24rem;
    89.   }
    90.  
    91.   .banner .banner-info .banner-number .banner-icon{
    92.     font-size: 0.24rem;
    93.     padding: 0.1rem;
    94.   }
    95. </style>
     

    21、Detail 界面中的 Header，包含绝对位置的返回按钮，以及一个固定位置的返回按钮标题；根据当前页面的滚动情况，动态切换不同位置的按钮显隐
     

    1. <template>
    2.   <div class="header">
    3.     <router-link tag="div" to='/' class="header-abs" v-show="showAbs">
    4.       <div class="iconfont back-abs-icon">&#xe624;</div>
    5.     </router-link>
    6.     <router-link tag="div" to='/' class="header-fixed" v-show="!showAbs"
    7.       :style="styleOpacity"
    8.       >
    9.       <div class="iconfont back-fixed-icon">&#xe624;</div>
    10.       景点详情
    11.     </router-link>
    12.   </div>
    13. </template>
    14.  
    15. <script>
    16.   export default {
    17.     name: 'DetailHeader',
    18.     data: function () {
    19.       return {
    20.         showAbs:true,
    21.         styleOpacity:{
    22.           opacity:0
    23.         }
    24.       }
    25.     },
    26.  
    27.     methods:{
    28.       handleScroll()
    29.       {
    30.         console.log('handleScroll')
    31.         const top = document.documentElement.scrollTop
    32.         console.warn('top ', top)
    33.         if (top > 60) {
    34.           this.showAbs = false
    35.           const opacity = top/140 > 1? 1: top/140
    36.           this.styleOpacity = {
    37.             opacity,
    38.           }
    39.         } else {
    40.           this.showAbs = true
    41.           this.styleOpacity = {
    42.             opacity:0,
    43.           }
    44.         }
    45.       },
    46.   },
    47.   mounted(){
    48.     window.addEventListener('scroll',this.handleScroll)
    49.   },
    50.   unmounted(){
    51.     window.removeEventListener('scroll',this.handleScroll)
    52.   },
    53.   }
    54. </script>
    55.  
    56. <!-- Add "scoped" attribute to limit CSS to this component only -->
    57. <style lang="stylus" scoped>
    58.   @import "~styles/varibles.styl";
    59.  
    60.   .header-abs{
    61.   position: absolute;
    62.   left:0.2rem;
    63.   top:0.2rem;
    64.   width: 0.8rem;
    65.   height: 0.8rem;
    66.   line-height: 0.8rem;
    67.   text-align: center;
    68.   border-radius: 0.4rem;
    69.   background: rgba(0,0,0,0.8);
    70. }
    71.   .header-abs .back-abs-icon{
    72.     color: #fff;
    73.     font-size: 0.4rem;
    74.  
    75.   }
    76.  
    77. .header-fixed{
    78.   position: fixed;
    79.   z-index: 2;
    80.   top:0;
    81.   left:0;
    82.   right:0;
    83.   overflow: hidden;
    84.   height: $headerHeight;
    85.   line-height: $headerHeight;
    86.   background: $bgColor;
    87.   color: #ffffff;
    88.   text-align: center;
    89.   font-size: 0.4rem;
    90. }
    91.  
    92. .header-fixed .back-fixed-icon{
    93.   position: absolute;
    94.   top:0;
    95.   left: 0;
    96.   width: 0.64rem;
    97.   text-align: center;
    98.   font-size: 0.4rem;
    99.   color: white;
    100. }
    101. </style>
     

    22、Detail 界面中的 List，一个简单的列表信息展示
     

    1. <template>
    2.   <div class="list">
    3.     <div class="item" v-for="(item,id) of list" :key="id">
    4.       <div class="item-title border-bottom">
    5.         <span class="item-title-icon"></span>
    6.         {{item.title}}</div>
    7.       <div v-if="item.children" class="item-children">
    8.         <detail-list :list="item.children"></detail-list>
    9.       </div>
    10.     </div>
    11.  
    12.   </div>
    13. </template>
    14.  
    15. <script>
    16.   export default {
    17.     name: 'DetailList',
    18.     props:{
    19.       list:Array
    20.     },
    21.     data: function () {
    22.       return {
    23.         msg: 'Welcome to Your Vue.js App'
    24.       }
    25.     }
    26.   }
    27. </script>
    28.  
    29. <!-- Add "scoped" attribute to limit CSS to this component only -->
    30. <style lang="stylus" scoped>
    31.  
    32.   .item-title-icon{
    33.     position: relative;
    34.     left: .06rem;
    35.     top: .06rem;
    36.     display: inline-block;
    37.     width: .36rem;
    38.     height: .36rem;
    39.     background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
    40.     margin-right: .1rem;
    41.     background-size: .4rem 3rem;
    42.   }
    43.   .item-title{
    44.     line-height: 0.8rem;
    45.     font-size: 0.32rem;
    46.     padding: 0 0.2rem;
    47.   }
    48.   .item-children{
    49.     padding: 0 0.4rem;
    50.   }
    51. </style>
     

     

    七、router路由管理， store vuex 状态管理 说明
     

    1、router路由管理，三个路由 path（/ 、/city、/detail/id），并且添加路由地址切换回 scroll 都置于顶部处理
     

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import Home from '@/pages/home/Home'
    4. import City from '@/pages/city/City'
    5. import Detail from '@/pages/detail/Detail'
    6.  
    7. Vue.use(Router)
    8.  
    9. /**
    10.  * 路由
    11.  */
    12. export default new Router({
    13.   routes: [
    14.     {
    15.       path: '/',
    16.       name: 'Home',
    17.       //component: Home
    18.       // 异步加载组件，避免大量的代码堆积到 app.js 中，()=> import( '@/pages/city/City') 可以拆分代码到其他的projectX.js中
    19.       component: ()=> import( '@/pages/home/Home')
    20.     },
    21.     {
    22.       path: '/city',
    23.       name: 'City',
    24.       //component: City
    25.       component: ()=>import('@/pages/city/City')
    26.     },
    27.     {
    28.       //动态路由
    29.       path: '/detail/:id',
    30.       name: 'Detail',
    31.       //component: Detail
    32.       component: ()=>import('@/pages/detail/Detail')
    33.     },
    34.   ],
    35.  
    36.   //添加路由切换的时候，scroll ，都回到顶部处理
    37.   scrollBehavior(to, from, savedPosition) {
    38.     // 回到顶部
    39.     return { x: 0, y:0 }
    40.   },
    41.  
    42.  
    43. })
     

    2、store 添加对某个全局参数的管理
     

     

    1. state.js
    2.  
    3. /**
    4.  * Created by 12722 on 2022/6/13.
    5.  */
    6. let defaultCity = '桂林'
    7. try{
    8.   if (localStorage.city){
    9.     defaultCity = localStorage.city
    10.   }
    11. }
    12. catch(e){}
    13.  
    14. export default{
    15.   city:defaultCity
    16. }
    17.  
    18.  
    19.  
    20. action.js
    21. /**
    22.  * Created by 12722 on 2022/6/13.
    23.  */
    24. export default {
    25.   changeCity(context,city){
    26.     context.commit('changeCity',city)
    27.   }
    28. }
    29.  
    30.  
    31.  
    32. mutations.js
    33. /**
    34.  * Created by 12722 on 2022/6/13.
    35.  */
    36. export default {
    37.   changeCity(state, city){
    38.     state.city = city
    39.     try{ // 本地化保存
    40.       localStorage.city = city}
    41.     catch(e){}
    42.  
    43.   }
    44. }
     

     

    八、几个性能优化点说明
     

    1、App.vue 中的 <keep-alive exclude="Detail"></keep-alive>
     

    keep-alive 会缓存一些数据，在界面切换后，也不销毁，例如mounted函数中 axios.get数据，从而避免 axios.get 频繁访问
     

     

     

    2、setTimeout 函数的使用，例如在 City 界面中 Search.vue 进行输入搜索时，可以控制搜索频率，间接提高性能；以及类似在 City 界面中 Alphabet.vue 进行 Touch 选中 字母的时候，也可控制搜索频率，间接提高性能
     

     

     

     
     

    九、axios 获取服务端数据说明
     

    1、例如 Home.vue 中 mounted 使用 axios.get 获取服务端数据时
     

    使用 axios.get('/api/index.json?city='+this.city).then(this.getHomeInfoSucc) 中的
     

    /api/index.json?city='+this.city 在浏览器中获取不到数据，为什么 axios.get 可以获得呢
     

     

     
     

    2、其实，在 config/index.js 做代理配置，当遇到 /api 就会进行对应转换，从而使得 axios.get 获取到对应的数据
     

     

     
     

    3、axios.get 获取的数据 static/mock 文件夹下的数据
     

     

     

    十、src/common 的共有 vue 
     

    1、Gallary.vue 全屏大图滑动轮播图片
     

    只要引入Gallary.vue，对应的添加传输图片列表数据，并且添加对应关闭事件，就可以轻易实现全屏大图滑动轮播图片
     

     

    参考引用 detail/components/Banner.vue :
     

     

     
     

    2、FadeAnimation.vue 渐隐渐现动画效果
     

    只要引入FadeAnimation.vue 包裹需要渐隐渐现的元素即可
     

     

     参考引用 detail/components/Banner.vue :
     

     

     

    十一、src/assets/styles 存放css 样式、常用的变量样式参数等
     

     

     1、mixins.styl 功能是：字显示超出范围，则用三个点... 表示，例如 ‘字太多了...’
     

     

     
     

     十二、该房去哪儿网的演示项目源码下载
     

    仅供学习参考使用：
     

    代码运行(最好的运行端口为 8080)：
     

    1、npm install
     

    2、npm run start
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
由iframe引起的无法返回上一页的问题                            
    
《牛客刷verilog》Part III Verilog企业真题                            
    
Centos Web Proxy(nginx)配置                            
    
Vue+elementui 纯前端实现Excel导入导出功能（区分表头标题）                            
    
启动hadoop并测试问题合集                            
    
[题] 筛质数 #质数（素数）                            
    
知识库建设：从0到1搞定知识库建设的方法论分享                            
    
RetinaNet网络理解                            
    
pyqt---子线程进行gui操作导致界面崩溃                            
    
ASP.NET限流器的简单实现                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/u014361280/article/details/125474369
                
    •