Vue实战项目开发--详情页面开发

水深无声 2022-04-17 01:56 330阅读 0赞

详情页面动态路由及banner布局

  • 创建一个detail-banner的分支，在router/index.js下添加这个路由，然后在pages文件新建detail文件夹和在detail下新建components文件夹

    1.  ![20181111184744999.png][]

  • Detail.vue：

    1. <template>
    2.   <div>
    3.     <detail-banner></detail-banner>
    4.   </div>
    5. </template>
    7. <script>
    8. import DetailBanner from './components/Banner'
    9. export default {
    10.   name: 'Datail',
    11.   components: {
    12.     DetailBanner
    13.   }
    14. }
    15. </script>
    17. <style lang="stylus" scoped>
    19. </style>

    banner.vue：

    1. <template>
    2.   <div class="banner">
    3.     <img 
    4.       class="banner-img" 
    5.       src="//img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_600x330_3b0fdac5.jpg" 
    6.       alt=""
    7.     >
    8.     <div class="banner-info">
    9.       <div class="banner-title">
    10.         成都海昌极地海洋公园(AAAA景区)
    11.       </div>
    12.       <div class="banner-num">
    13.         <i class="iconfont banner-icon"></i>39
    14.       </div>
    15.     </div>
    16.   </div>
    17. </template>
    19. <script>
    20. export default {
    21.   name: 'DatailBanner'
    22. }
    23. </script>
    25. <style lang="stylus" scoped>
    26.   .banner
    27.     overflow hidden
    28.     position relative
    29.     height 0
    30.     padding-bottom 55%
    31.     .banner-img
    32.       width 100%
    33.     .banner-info
    34.       display flex
    35.       position absolute
    36.       left 0
    37.       right 0
    38.       bottom 0
    39.       line-height .6rem
    40.       color #ffffff
    41.       background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
    42.       .banner-title
    43.         flex 1
    44.         font-size .28rem
    45.         padding 0 .2rem
    46.       .banner-num
    47.         height .32rem
    48.         line-height .32rem
    49.         margin-top .14rem
    50.         padding 0 .4rem
    51.         border-radius .2rem
    52.         background rgba(0, 0, 0, .8)
    53.         font-size .24rem
    54.         .banner-icon
    55.           font-size .24rem
    56.           margin-right .1rem
    57. </style>

    还有这里使用新的icon，需要在iconfont的项目新加上图片的icon，并下载到本地，把项目的这些替换掉watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70

    还需要把iconfont.css中的base64那行替换成新的iconfont.css中的base64的代码 2018111118535816.png

公用图片画廊组件拆分

新建一个detail-banner分支，并创建一个公用的公用图片画廊组件Gallary.vue

  1. <template>
  2.   <div class="container" @click="handleGallaryClick">
  3.     <div class="wrapper">
  4.       <swiper :options="swiperOptions">
  5.           <swiper-slide
  6.             v-for="(item,index) of imgs"
  7.             :key="index"
  8.           >
  9.             <img class="gallary-img" :src="item">
  10.           </swiper-slide>
  11.           <div class="swiper-pagination" slot="pagination"></div>
  12.       </swiper>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   name: 'CommonGallary',
  20.   props: {
  21.     imgs: {
  22.       type: Array,
  23.       default () {
  24.         return []
  25.       }
  26.     }
  27.   },
  28.   data () {
  29.     return {
  30.       swiperOptions: {
  31.         pagination: '.swiper-pagination',
  32.         paginationType: 'fraction',
  33.         observeParents: true,
  34.         observer: true
  35.       }
  36.     }
  37.   },
  38.   methods: {
  39.     handleGallaryClick () {
  40.       this.$emit('close')
  41.     }
  42.   }
  43. }
  44. </script>
  46. <style lang="stylus" scoped>
  47.   .container >>> .swiper-container
  48.     overflow inherit
  49.   .container
  50.     display flex
  51.     flex-direction column
  52.     justify-content center
  53.     z-index 99
  54.     position fixed
  55.     left 0
  56.     right 0
  57.     top 0
  58.     bottom 0
  59.     background #000000
  60.     .wrapper
  61.       width 100%
  62.       height 0
  63.       padding-bottom 100%
  64.       .gallary-img
  65.         width 100%
  66.       .swiper-pagination
  67.         color #ffffff
  68.         bottom -1rem
  69. </style>

上面的代码使用的props来实现子组件来得到父组件传来的值，使用$emit向父组件传递方法(同时也可以把值一起传到父组件)

父组件Banner.vue

  1. <template>
  2.   <div>
  3.     <div class="banner" @click="handleBannerClick">
  4.       <img 
  5.         class="banner-img" 
  6.         src="//img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_600x330_3b0fdac5.jpg" 
  7.         alt=""
  8.       >
  9.       <div class="banner-info">
  10.         <div class="banner-title">
  11.           成都海昌极地海洋公园(AAAA景区)
  12.         </div>
  13.         <div class="banner-num">
  14.           <i class="iconfont banner-icon"></i>39
  15.         </div>
  16.       </div>
  17.     </div>
  18.     <common-gallary 
  19.       :imgs="imgs" 
  20.       v-show="showGallary"
  21.       @close="handleGallaryClose"
  22.     ></common-gallary>
  23.   </div>
  24. </template>
  26. <script>
  27. import CommonGallary from 'common/gallary/Gallary'
  28. export default {
  29.   name: 'DatailBanner',
  30.   components: {
  31.     CommonGallary
  32.   },
  33.   data () {
  34.     return {
  35.       showGallary: false,
  36.       imgs:['http://img1.qunarzz.com/sight/p0/1612/ca/cae19b693b872602a3.img.jpg_350x240_8c2c93d2.jpg',
  37.         'http://img1.qunarzz.com/sight/p0/1612/4c/4c8c800abd2e8aafa3.img.jpg_350x240_360ff6aa.jpg']
  38.     }
  39.   },
  40.   methods: {
  41.     handleBannerClick () {
  42.       this.showGallary = true;
  43.     },
  44.     handleGallaryClose () {
  45.       this.showGallary = false;
  46.     }
  47.   }
  48. }
  49. </script>
  51. <style lang="stylus" scoped>
  52.   .banner
  53.     overflow hidden
  54.     position relative
  55.     height 0
  56.     padding-bottom 55%
  57.     .banner-img
  58.       width 100%
  59.     .banner-info
  60.       display flex
  61.       position absolute
  62.       left 0
  63.       right 0
  64.       bottom 0
  65.       line-height .6rem
  66.       color #ffffff
  67.       background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
  68.       .banner-title
  69.         flex 1
  70.         font-size .28rem
  71.         padding 0 .2rem
  72.       .banner-num
  73.         height .32rem
  74.         line-height .32rem
  75.         margin-top .14rem
  76.         padding 0 .4rem
  77.         border-radius .2rem
  78.         background rgba(0, 0, 0, .8)
  79.         font-size .24rem
  80.         .banner-icon
  81.           font-size .24rem
  82.           margin-right .1rem
  83. </style>

上面的代码有两个主要的方法handleBannerClick()和handleGallaryClose()，分别实现的是使公用画廊组件显示和隐藏，handleGallaryClose()是通过子组件向父组件发送信息和方法

实现header渐隐渐显效果

Header.vue代码：

  1. <template>
  2.   <div>
  3.     <router-link 
  4.       tag='div' 
  5.       to="/" 
  6.       class="header-abs"
  7.       v-show="showAbs"
  8.     > 
  9.       <i class="iconfont header-abs-back"></i>
  10.     </router-link>
  11.     <div 
  12.       class="header-fixed"
  13.       v-show="!showAbs"
  14.       :style="opacityStyle"
  15.     >
  16.       <router-link to='/'>
  17.         <div class="iconfont header-fixed-back"></div>
  18.       </router-link>
  19.       景点详情
  20.     </div>
  21.   </div>
  22. </template>
  24. <script>
  25. export default {
  26.   name: 'DatailHeader',
  27.   data () {
  28.     return {
  29.       showAbs: true,
  30.       opacityStyle: {
  31.         opacity: 0
  32.       }
  33.     }
  34.   },
  35.   activated () {
  36.     window.addEventListener('scroll',this.handleScroll)
  37.   },
  38.   methods: {
  39.     handleScroll () {
  40.       const top = document.documentElement.scrollTop
  41.       if(top > 60 ) {
  42.         let opacity = top /140
  43.         opacity = opacity > 1 ? 1 : opacity
  44.         this.opacityStyle = { opacity}
  45.         this.showAbs = false
  46.       } else {
  47.         this.showAbs = true
  48.       }
  49.     }
  50.   }
  51. }
  52. </script>
  53. <style lang="stylus" scoped>
  54.   @import '~styles/varibles.styl'
  55.   .header-abs
  56.     position absolute
  57.     left .2rem
  58.     top .2rem
  59.     width .8rem
  60.     height .8rem
  61.     line-height .8rem
  62.     border-radius .4rem
  63.     text-align center
  64.     background rgba(0, 0, 0, .6)
  65.     .header-abs-back
  66.       color #ffffff
  67.       font-size .4rem
  68.   .header-fixed
  69.     position fixed
  70.     top 0
  71.     left 0
  72.     right 0
  73.     height $headerHeight
  74.     line-height $headerHeight
  75.     text-align center
  76.     color #fff
  77.     background $bgColor
  78.     font-size .32rem
  79.     .header-fixed-back
  80.       position absolute
  81.       top 0
  82.       left 0
  83.       width .64rem
  84.       text-align center
  85.       font-size .4rem
  86.       color #ffffff
  87. </style>

实现的效果：在顶部是这样的样式

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1

下滑超过60高时样式：

20181205222725693.png

下拉时，下面的样式是逐渐显示出来的，使用:style动态样式实现的，通过window.addEventListener(‘scroll’,this.handleScroll)来监听窗口的滑动，使用document.documentElement.scrollTop来判断滑动距顶部的距离

对全局事件的解绑

在上面的Header.vue组件中使用了全局事件

  1. activated () {
  2.     window.addEventListener('scroll',this.handleScroll)
  3. }

上面的代码不止在详情页面中会触发，而且在其他页面也会触发，因为这是一个全局事件，所以这里我们需要使用对这个全局事件进行解绑

  1. // 页面被隐藏或者页面被替换成新的组件时触发的
  2.   deactivated () {
  3.     window.removeEventListener('scroll',this.handleScroll)
  4.   }

上面这段代码就实现了对全局事件的解绑

使用递归组件实现详情页列表

首先创建一个detail-list分支，并创建一个detail-list.vue的组件

  1. <template>
  2.   <div>
  3.     <div
  4.       class="item"
  5.       v-for="(item,index) of list"
  6.       :key="index"
  7.     >
  8.       <div class="item-title border-bottom">
  9.         <span class="item-title-icon"></span>
  10.         {
  11.    {item.title}}
  12.       </div>
  13.       <div v-if="item.children" class="item-children">
  14.         <detail-list :list="item.children"></detail-list>
  15.       </div>
  16.     </div>
  17.   </div>
  18. </template>
  20. <script>
  21. export default {
  22.   name: 'DetailList',
  23.   props: {
  24.     list: Array
  25.   }
  26. }
  27. </script>
  28. <style lang="stylus" scoped>
  29.   .item-title-icon
  30.     position relative
  31.     left .06rem
  32.     top .06rem
  33.     display: inline-block
  34.     width .36rem
  35.     height .36rem
  36.     background url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
  37.     margin-right .1rem
  38.     background-size .4rem 3rem
  39.   .item-title
  40.     line-height .8rem
  41.     font-size .32rem
  42.     padding .2rem
  43.   .item-children
  44.     padding 0 .2rem
  45. </style>

上面的这段代码实现了递归实现，使用v-if判断是否有children数据，有就把这个children中的数据传到自身上，通过name来调用本身，从而实现了递归

  1. <div v-if="item.children" class="item-children">
  2.     <detail-list :list="item.children"></detail-list>
  3. </div>

在Deatil.vue中引入这个组件，并向子组件Lits.vue传入数据list

  1. <template>
  2.   <div>
  3.     <detail-banner></detail-banner>
  4.     <detail-header></detail-header>
  5.     <div class="content">
  6.       <detail-list :list="list"></detail-list>
  7.     </div>
  8.   </div>
  9. </template>
  11. <script>
  12. import DetailBanner from './components/Banner'
  13. import DetailHeader from './components/Header'
  14. import DetailList from './components/List'
  15. export default {
  16.   name: 'Datail',
  17.   components: {
  18.     DetailBanner,
  19.     DetailHeader,
  20.     DetailList
  21.   },
  22.   data () {
  23.     return {
  24.       list: [
  25.         {
  26.           title: '成人票',
  27.           children: [{
  28.             title: '成人三馆联票',
  29.             children: [{
  30.               title: '成人三馆联票- 某一连锁店销售'
  31.             }]
  32.           },{
  33.             title: '成人五馆联票'
  34.           }]
  35.         },
  36.         {
  37.           title: '学生票'
  38.         },
  39.         {
  40.           title: '儿童票'
  41.         },
  42.         {
  43.           title: '特惠票'
  44.         }
  45.       ]
  46.     }
  47.   }
  48. }
  49. </script>
  51. <style lang="stylus" scoped>
  52. .content{
  53.   height 50rem
  54. }
  55. </style>

使用Ajax获取动态数据

新建一个分支detail-ajax，并引用一个detail.json来模拟数据
Detail.vue修改：

  1. <template>
  2.   <div>
  3.     <detail-banner
  4.       :sightName="sightName"
  5.       :bannerImg = "bannerImg"
  6.       :bannerImgs ="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>
  15. <script>
  16. import DetailBanner from './components/Banner'
  17. import DetailHeader from './components/Header'
  18. import DetailList from './components/List'
  19. import axios from 'axios'
  20. export default {
  21.   name: 'Datail',
  22.   components: {
  23.     DetailBanner,
  24.     DetailHeader,
  25.     DetailList
  26.   },
  27.   data () {
  28.     return {
  29.       sightName: '',
  30.       bannerImg: '',
  31.       gallaryImgs: [],
  32.       list: []
  33.     }
  34.   },
  35.   mounted () {
  36.     this.getDetailInfo ()
  37.   },
  38.   methods: {
  39.     getDetailInfo () {
  40.       axios.get('/api/detail.json',{
  41.         params: {
  42.           id: this.$route.params.id
  43.         }
  44.       }).then(this.handeGetDataSucc)
  45.     },
  46.     handeGetDataSucc (res) {
  47.       res = res.data
  48.       if (res.ret && res.data) {
  49.         const data = res.data
  50.         this.sightName = data.sightName
  51.         this.bannerImg = data.bannerImg
  52.         this.gallaryImgs = data.gallaryImgs
  53.         this.list = data.categoryList
  54.       }
  55.     }
  56.   }
  57. }
  58. </script>
  60. <style lang="stylus" scoped>
  61. .content{
  62.   height 50rem
  63. }
  64. </style>

Banner.vue修改：

  1. <template>
  2.   <div>
  3.     <div class="banner" @click="handleBannerClick">
  4.       <img class="banner-img" :src="bannerImg">
  5.       <div class="banner-info">
  6.         <div class="banner-title">
  7.           {
  8.    {this.sightName}}
  9.         </div>
  10.         <div class="banner-num">
  11.           <i class="iconfont banner-icon"></i>
  12.           {
  13.    {this.bannerImgs.length}}
  14.         </div>
  15.       </div>
  16.     </div>
  17.     <common-gallary 
  18.       :imgs="bannerImgs" 
  19.       v-show="showGallary"
  20.       @close="handleGallaryClose"
  21.     ></common-gallary>
  22.   </div>
  23. </template>
  25. <script>
  26. import CommonGallary from 'common/gallary/Gallary'
  27. export default {
  28.   name: 'DatailBanner',
  29.   components: {
  30.     CommonGallary
  31.   },
  32.   props: {
  33.     sightName: String,
  34.     bannerImg: String,
  35.     bannerImgs: Array
  36.   },
  37.   data () {
  38.     return {
  39.       showGallary: false,
  40.     }
  41.   },
  42.   methods: {
  43.     handleBannerClick () {
  44.       this.showGallary = true;
  45.     },
  46.     handleGallaryClose () {
  47.       this.showGallary = false;
  48.     }
  49.   }
  50. }
  51. </script>
  53. <style lang="stylus" scoped>
  54.   .banner
  55.     overflow hidden
  56.     position relative
  57.     height 0
  58.     padding-bottom 55%
  59.     .banner-img
  60.       width 100%
  61.     .banner-info
  62.       display flex
  63.       position absolute
  64.       left 0
  65.       right 0
  66.       bottom 0
  67.       line-height .6rem
  68.       color #ffffff
  69.       background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
  70.       .banner-title
  71.         flex 1
  72.         font-size .28rem
  73.         padding 0 .2rem
  74.       .banner-num
  75.         height .32rem
  76.         line-height .32rem
  77.         margin-top .14rem
  78.         padding 0 .4rem
  79.         border-radius .2rem
  80.         background rgba(0, 0, 0, .8)
  81.         font-size .24rem
  82.         .banner-icon
  83.           font-size .24rem
  84.           margin-right .1rem
  85. </style>

还有存在一个问题就是拖动在多个页面会相互影响：

  1.  在router/index.js中加入这段代码：
  3. scrollBehavior (to, from, savedPosition) {
  4.   return { x: 0, y: 0 }
  5. }

上面这段代码的作用是每次切换路由时，对应的页面的x轴，y轴都为0

总结一下，组件中name的作用：

  1. 递归组件的时候可以使用name来调用自身
  2. 当我们在页面上对某个页面取消缓存的时候

  3. 在浏览器的vue插件中展开的组件的名字就是name

    1.  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

在项目中加入基础动画

新建一个detail-animation分支，并在common/fade下新建一个Fade.vue文件

  1. <template>
  2.   <transition>
  3.     <slot>
  4.     </slot>
  5.   </transition>
  6. </template>
  7. <script>
  8. export default {
  9.   name: 'Fade'
  10. }
  11. </script>
  12. <style lang="stylus" scoped>
  13.   .v-enter, .v-leave-to
  14.     opacity 0
  15.   .v-enter-active, .v-leave-active
  16.     transition opacity  .5s
  17. </style>

然后在Banner.vue中使用（要先引用对应的组件并注册，然后就可以使用了，还有其他动画效果可以看我之前的博客：Vue实战项目开发—Vue中的动画特效）：

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

发表评论

表情：
评论列表 （有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读