Vue实战项目开发--城市列表页面

本是古典 何须时尚 2022-05-15 16:18 453阅读 0赞

城市选择页面路由配置

  • 创建一个city-router的分支，用于城市列表的功能实现

  • 路由配置，修改router/index.js的内容

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    4. Vue.use(Router)
    6. export default new Router({
    7.   routes: [
    8.     {
    9.       path: '/',
    10.       name: 'Home',
    11.       component:  () => import( '@/pages/home/Home')
    12.     },
    13.     {
    14.       path: '/city',
    15.       name: 'City',
    16.       component:  () => import( '@/pages/city/City')
    17.     }
    18.   ]
    19. })

    然后在pages文件夹下新建city文件夹，并创建City.vue，最后在city文件夹下新建components文件夹，然后创建City.vue的顶部Header.vue

  • City.vue：

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.   </div>
    5. </template>
    6. <script>
    7. import CityHeader from './components/Header'
    8. export default {
    9.   name:'City',
    10.   components: {
    11.     CityHeader
    12.   },
    13.   data () {
    14.     return {
    16.     }
    17.   }
    18. }
    19. </script>
    20. <style lang="stylus" scoped>
    22. </style>

    Header.vue:

    1. <template>
    2.   <div class="header">
    3.     城市选择
    4.     <router-link to='/'>
    5.        <div class="iconfont header-back"></div>
    6.     </router-link>
    7.   </div>
    8. </template>
    9. <script>
    10. export default {
    11.   name:'CityHeader',
    12.   data () {
    13.     return {
    15.     }
    16.   }
    17. }
    18. </script>
    19. <style lang="stylus" scoped>
    20.   @import '~styles/varibles.styl'
    21.   .header
    22.     position relative
    23.     height $headerHeight
    24.     line-height $headerHeight
    25.     text-align center
    26.     color #fff
    27.     background $bgColor
    28.     font-size .32rem
    29.     .header-back
    30.       position absolute
    31.       top 0
    32.       left 0
    33.       width .64rem
    34.       text-align center
    35.       font-size .4rem
    36.       color #ffffff
    37. </style>

  • 实现点击首页的header部分的成都进入城市列表和点击城市列表的返回按钮返回首页，这里使用router-link实现的，router-link类似a标签

    1. <router-link to='/city'>
    2.        <div class="header-right">
    3.         {
    4.      {this.city}}
    5.         <i class="iconfont arrow-icon"></i>
    6.       </div>
    7. </router-link>
    9. <router-link to='/'>
    10.        <div class="iconfont header-back"></div>
    11.  </router-link>

  • 代码优化：这里把顶部的height在varibles.styl文件中定义为一个常量，方便后期修改

    1. $headerHeight = .86rem

    使用

    1. @import '~styles/varibles.styl'   （这里需要先引入才可以使用）
    3. height $headerHeight  
    4. line-height $headerHeight

    最后，把代码提交到GitHub上

搜索框布局

  • 创建city-search分支，然后把本地的项目改在新建的这个分支上进行开发

  • 在components中新建Search.vue文件

    1. <template>
    2.   <div class="search">
    3.     <input class="search-input" type="text" placeholder="输入城市名或拼音">
    4.   </div>
    5. </template>
    6. <script>
    7. export default {
    8.   name:'CitySearch',
    9.   data () {
    10.     return {
    12.     }
    13.   }
    14. }
    15. </script>
    16. <style lang="stylus" scoped>
    17.   @import '~styles/varibles.styl'
    18.   .search
    19.     height .72rem
    20.     padding 0 .1rem
    21.     background $bgColor
    22.     .search-input
    23.       box-sizing border-box
    24.       width 100%
    25.       height .62rem
    26.       padding 0 .1rem
    27.       line-height .62rem
    28.       text-align center
    29.       border-radius .06rem
    30.       color #666666
    31. </style>

    然后在City.vue中引入并使用

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.     <city-search></city-search>
    5.   </div>
    6. </template>
    7. <script>
    8. import CityHeader from './components/Header'
    9. import CitySearch from './components/Search'
    11. export default {
    12.   name:'City',
    13.   components: {
    14.     CityHeader,
    15.     CitySearch
    16.   },
    17.   data () {
    18.     return {
    20.     }
    21.   }
    22. }
    23. </script>
    24. <style lang="stylus" scoped>
    26. </style>

    然后搜索框布局就完成了，最后把代码提交到GitHub上

列表布局

  • 创建city-list分支，然后把本地的项目改在新建的这个分支上进行开发

  • 在components中新建List.vue文件

    1. <template>
    2.   <div class="list">
    3.     <div class="area">
    4.       <div class="title border-topbottom">当前城市</div>
    5.       <div class="button-list">
    6.         <div class="button-wrapper">
    7.           <div class="button">成都</div>
    8.         </div>
    9.       </div>
    10.     </div>
    11.     <div class="area">
    12.       <div class="title border-topbottom">热门城市</div>
    13.       <div class="button-list">
    14.         <div class="button-wrapper">
    15.           <div class="button">成都</div>
    16.         </div>
    17.         <div class="button-wrapper">
    18.           <div class="button">成都</div>
    19.         </div>
    20.         <div class="button-wrapper">
    21.           <div class="button">成都</div>
    22.         </div>
    23.         <div class="button-wrapper">
    24.           <div class="button">成都</div>
    25.         </div>
    26.       </div>
    27.     </div>
    28.     <div class="area">
    29.       <div class="title border-topbottom">A</div>
    30.       <div class="item-list">
    31.         <div class="item border-bottom">阿拉尔</div>
    32.         <div class="item border-bottom">阿拉尔</div>
    33.         <div class="item border-bottom">阿拉尔</div>
    34.         <div class="item border-bottom">阿拉尔</div>
    35.         <div class="item border-bottom">阿拉尔</div>
    36.         <div class="item border-bottom">阿拉尔</div>
    37.       </div>
    38.     </div>
    39.     <div class="area">
    40.       <div class="title border-topbottom">B</div>
    41.       <div class="item-list">
    42.         <div class="item border-bottom">阿拉尔</div>
    43.         <div class="item border-bottom">阿拉尔</div>
    44.         <div class="item border-bottom">阿拉尔</div>
    45.         <div class="item border-bottom">阿拉尔</div>
    46.         <div class="item border-bottom">阿拉尔</div>
    47.         <div class="item border-bottom">阿拉尔</div>
    48.       </div>
    49.     </div>
    50.     <div class="area">
    51.       <div class="title border-topbottom">C</div>
    52.       <div class="item-list">
    53.         <div class="item border-bottom">阿拉尔</div>
    54.         <div class="item border-bottom">阿拉尔</div>
    55.         <div class="item border-bottom">阿拉尔</div>
    56.         <div class="item border-bottom">阿拉尔</div>
    57.         <div class="item border-bottom">阿拉尔</div>
    58.         <div class="item border-bottom">阿拉尔</div>
    59.       </div>
    60.     </div>
    61.     <div class="area">
    62.       <div class="title border-topbottom">D</div>
    63.       <div class="item-list">
    64.         <div class="item border-bottom">阿拉尔</div>
    65.         <div class="item border-bottom">阿拉尔</div>
    66.         <div class="item border-bottom">阿拉尔</div>
    67.         <div class="item border-bottom">阿拉尔</div>
    68.         <div class="item border-bottom">阿拉尔</div>
    69.         <div class="item border-bottom">阿拉尔</div>
    70.       </div>
    71.     </div>
    73.   </div>
    74. </template>
    75. <script>
    76. export default {
    77.   name:'CityList',
    78. }
    79. </script>
    80. <style lang="stylus" scoped>
    81.   @import '~styles/varibles.styl'
    82.   .border-topbottom
    83.     &:before
    84.       border-color #ccc
    85.     &:after
    86.       border-color #ccc
    87.    .border-bottom
    88.     &:before
    89.       border-color #ccc
    90.   .list
    91.     overflow hidden
    92.     position absolute
    93.     top 1.58rem
    94.     left 0
    95.     right 0
    96.     bottom 0
    97.     .title
    98.       line-height .44rem
    99.       background #eee
    100.       padding-left .2rem
    101.       color #666
    102.       font-size .26rem
    103.     .button-list
    104.       padding .1rem .6rem .1rem .1rem
    105.       overflow hidden 
    106.       .button-wrapper
    107.         float left
    108.         width 33.33%
    109.         .button
    110.           margin .1rem
    111.           padding .1rem 0
    112.           text-align center
    113.           border .02rem solid #ccc
    114.           border-radius .06rem
    115.     .item-list
    116.     .item
    117.       line-height .76rem
    118.       padding-left .2rem
    119. </style>

    然后在City.vue中引入并使用

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.     <city-search></city-search>
    5.     <city-list></city-list>
    6.   </div>
    7. </template>
    8. <script>
    9. import CityHeader from './components/Header'
    10. import CitySearch from './components/Search'
    11. import CityList from './components/List'
    13. export default {
    14.   name:'City',
    15.   components: {
    16.     CityHeader,
    17.     CitySearch,
    18.     CityList
    19.   }
    20. }
    21. </script>
    22. <style lang="stylus" scoped>
    24. </style>

    然后列表布局就完成了，最后把代码提交到GitHub上

Better-scroll的使用及字母表布局

  • 安装better-scroll插件

    1. npm install better-scroll --save

    在文档可以看到better-scroll的使用better-scroll的GitHub地址

  • 修改List.vue的代码

    （使用ref来获取当前元素）

    <- 这里放之前的内容 ->

    引入并使用

    import BScroll from ‘better-scroll’
    export default {

    1.  name:'CityList',
    2.  mounted () {
    3.    this.scroll = new BScroll(this.$refs.wrapper)
    4.  }

    }

    完整代码

    better-scroll就引入并使用完成了

  • 字母表布局：在componens文件夹下新建Alphabet.vue

    1. <template>
    2.   <ul class="list">
    3.     <li class="item">A</li>
    4.     <li class="item">A</li>
    5.     <li class="item">A</li>
    6.     <li class="item">A</li>
    7.     <li class="item">A</li>
    8.   </ul>
    9. </template>
    10. <script>
    11. export default {
    12.   name:'CityAlphabet',
    13. }
    14. </script>
    15. <style lang="stylus" scoped>
    16.   @import '~styles/varibles.styl'
    17.   .list
    18.     display flex
    19.     flex-direction column
    20.     justify-content center
    21.     position absolute
    22.     top 1.58rem
    23.     right 0
    24.     bottom 0
    25.     width .4rem
    26.     .item
    27.       line-height .4rem
    28.       text-align center
    29.       color $bgColor
    30. </style>

    然后在City.vue中引入：

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.     <city-search></city-search>
    5.     <city-list></city-list>
    6.     <city-alphabet></city-alphabet>
    7.   </div>
    8. </template>
    9. <script>
    10. import CityHeader from './components/Header'
    11. import CitySearch from './components/Search'
    12. import CityList from './components/List'
    13. import CityAlphabet from './components/Alphabet'
    15. export default {
    16.   name:'City',
    17.   components: {
    18.     CityHeader,
    19.     CitySearch,
    20.     CityList,
    21.     CityAlphabet
    22.   },
    23.   data () {
    24.     return {
    26.     }
    27.   }
    28. }
    29. </script>
    30. <style lang="stylus" scoped>
    32. </style>

    字母表布局就完成了，最后把代码提交到线上

页面的动态数据渲染

  • 创建city-Ajax分支，然后把本地的项目改在新建的这个分支上进行开发
  • 使用Ajax模拟网络请求，在static/mock下新建一个city.json(有需要的可以在我的GitHub上拉取),在使用axios来模拟请求数据

  • City.vue的js部分：

    1. <script>
    2. import axios from 'axios'
    3. import CityHeader from './components/Header'
    4. import CitySearch from './components/Search'
    5. import CityList from './components/List'
    6. import CityAlphabet from './components/Alphabet'
    8. export default {
    9.   name:'City',
    10.   components: {
    11.     CityHeader,
    12.     CitySearch,
    13.     CityList,
    14.     CityAlphabet
    15.   },
    16.   data () {
    17.     return {
    18.       cities: {},
    19.       hotCities: []
    20.     }
    21.   },
    22.   methods: {
    23.     getCityInfo () {
    24.       axios.get('/api/city.json')
    25.         .then(this.handleGetCityInfoSucc)
    26.     },
    27.     handleGetCityInfoSucc (res) {
    28.       console.log(res)
    29.       res = res.data
    30.       if(res.ret && res.data){
    31.         const data = res.data
    32.         this.cities = data.cities
    33.         this.hotCities = data.hotCities
    34.       }
    35.     }
    36.   },
    37.   mounted () {
    38.     this.getCityInfo()
    39.   }
    41. }
    42. </script>

    City.vue：

    1. <template>
    2.   <div>
    3.     <city-header></city-header>
    4.     <city-search></city-search>
    5.     <city-list :cities="cities" :hot="hotCities"></city-list>
    6.     <city-alphabet :cities="cities"></city-alphabet>
    7.   </div>
    8. </template>
    9. <script>
    10. import axios from 'axios'
    11. import CityHeader from './components/Header'
    12. import CitySearch from './components/Search'
    13. import CityList from './components/List'
    14. import CityAlphabet from './components/Alphabet'
    16. export default {
    17.   name:'City',
    18.   components: {
    19.     CityHeader,
    20.     CitySearch,
    21.     CityList,
    22.     CityAlphabet
    23.   },
    24.   data () {
    25.     return {
    26.       cities: {},
    27.       hotCities: []
    28.     }
    29.   },
    30.   methods: {
    31.     getCityInfo () {
    32.       axios.get('/api/city.json')
    33.         .then(this.handleGetCityInfoSucc)
    34.     },
    35.     handleGetCityInfoSucc (res) {
    36.       console.log(res)
    37.       res = res.data
    38.       if(res.ret && res.data){
    39.         const data = res.data
    40.         this.cities = data.cities
    41.         this.hotCities = data.hotCities
    42.       }
    43.     }
    44.   },
    45.   mounted () {
    46.     this.getCityInfo()
    47.   }
    49. }
    50. </script>
    51. <style lang="stylus" scoped>
    53. </style>

    List.vue:

    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">成都</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" v-for="item of hot" :key="item.id">
    16.             <div class="button">{
    17.      {item.name}}</div>
    18.           </div>
    19.         </div>
    20.       </div>
    21.       <div class="area" v-for="(item,key) of cities" :key="key">
    22.         <div class="title border-topbottom">{
    23.      {key}}</div>
    24.         <div class="item-list">
    25.           <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{
    26.      {innerItem.name}}</div>
    27.         </div>
    28.       </div>
    29.      </div>
    30.   </div>
    31. </template>
    33. <script>
    34. import BScroll from 'better-scroll'
    35. export default {
    36.   name:'CityList',
    37.   props: {  
    38.     hot: Array,
    39.     cities: Object
    40.   },
    41.   mounted () {
    42.     this.scroll = new BScroll(this.$refs.wrapper)
    43.   }
    44. }
    45. </script>
    46. <style lang="stylus" scoped>
    47.   @import '~styles/varibles.styl'
    48.   .border-topbottom
    49.     &:before
    50.       border-color #ccc
    51.     &:after
    52.       border-color #ccc
    53.    .border-bottom
    54.     &:before
    55.       border-color #ccc
    56.   .list
    57.     overflow hidden
    58.     position absolute
    59.     top 1.58rem
    60.     left 0
    61.     right 0
    62.     bottom 0
    63.     .title
    64.       line-height .54rem
    65.       background #eee
    66.       padding-left .2rem
    67.       color #666
    68.       font-size .26rem
    69.     .button-list
    70.       padding .1rem .6rem .1rem .1rem
    71.       overflow hidden 
    72.       .button-wrapper
    73.         float left
    74.         width 33.33%
    75.         .button
    76.           margin .1rem
    77.           padding .1rem 0
    78.           text-align center
    79.           border .02rem solid #ccc
    80.           border-radius .06rem
    81.     .item-list
    82.     .item
    83.       line-height .76rem
    84.       padding-left .2rem
    85. </style>

    Alphabet.vue：

    1. <template>
    2.   <ul class="list">
    3.     <li class="item" v-for="(item,key) of cities" :key="key">{
    4.      {key}}</li>
    5.   </ul>
    6. </template>
    7. <script>
    8. export default {
    9.   name:'CityAlphabet',
    10.   props: {
    11.    cities: Object
    12.   }
    13. }
    14. </script>
    15. <style lang="stylus" scoped>
    16.   @import '~styles/varibles.styl'
    17.   .list
    18.     display flex
    19.     flex-direction column
    20.     justify-content center
    21.     position absolute
    22.     top 1.58rem
    23.     right 0
    24.     bottom 0
    25.     width .4rem
    26.     .item
    27.       line-height .4rem
    28.       text-align center
    29.       color $bgColor
    30. </style>

  • 最后看一下最后的效果，记住把代码提交到GitHub上

    1.    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

兄弟组建间联动

  • 实现点击右侧字母，左边的内容跟着字母变化

    1.      ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]
    3.  就是点击H字母，城市列表就跳到H首字母的城市列表
    5.  这里是通过在Alphabet.vue监听点击字母的点击事件，然后把点击对应的元素的值传给父组件，父组件再将这个值传给List.vue子组件的
    7. Alphabet.vue（增加了handleLetterClick，通过emit把值传给父组件的）：


    City.vue（通过@change=”handleLetterChange”来接受Alphabet.vue子组件传过来的值，并在data中定义letter值，在前面的方法把从子组件得到的值赋给data中定义好的letter，然后把这个值通过属性传给List.vue子组件）：


List.vue（在这里使用props接受父组件传来的letter值，并使用watch来监听letter值的变化，然后让内容跟随右侧字母的变化）:

  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">成都</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" v-for="item of hot" :key="item.id">
  16.             <div class="button">{
  17.    {item.name}}</div>
  18.           </div>
  19.         </div>
  20.       </div>
  21.       <div 
  22.         class="area" 
  23.         v-for="(item,key) of cities" 
  24.         :key="key"
  25.         :ref="key"
  26.       >
  27.         <div class="title border-topbottom">{
  28.    {key}}</div>
  29.         <div class="item-list">
  30.           <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{
  31.    {innerItem.name}}</div>
  32.         </div>
  33.       </div>
  34.      </div>
  35.   </div>
  36. </template>
  38. <script>
  39. import BScroll from 'better-scroll'
  40. export default {
  41.   name:'CityList',
  42.   props: {  
  43.     hot: Array,
  44.     cities: Object,
  45.     letter: String
  46.   },
  47.   mounted () {
  48.     this.scroll = new BScroll(this.$refs.wrapper)
  49.   },
  50.   watch: {
  51.     letter () {
  52.       if (this.letter) {
  53.         const element = this.$refs[this.letter][0]
  54.         this.scroll.scrollToElement(element)
  55.       }
  56.     }
  57.   }
  58. }
  59. </script>
  60. <style lang="stylus" scoped>
  61.   @import '~styles/varibles.styl'
  62.   .border-topbottom
  63.     &:before
  64.       border-color #ccc
  65.     &:after
  66.       border-color #ccc
  67.    .border-bottom
  68.     &:before
  69.       border-color #ccc
  70.   .list
  71.     overflow hidden
  72.     position absolute
  73.     top 1.58rem
  74.     left 0
  75.     right 0
  76.     bottom 0
  77.     .title
  78.       line-height .54rem
  79.       background #eee
  80.       padding-left .2rem
  81.       color #666
  82.       font-size .26rem
  83.     .button-list
  84.       padding .1rem .6rem .1rem .1rem
  85.       overflow hidden 
  86.       .button-wrapper
  87.         float left
  88.         width 33.33%
  89.         .button
  90.           margin .1rem
  91.           padding .1rem 0
  92.           text-align center
  93.           border .02rem solid #ccc
  94.           border-radius .06rem
  95.     .item-list
  96.     .item
  97.       line-height .76rem
  98.       padding-left .2rem
  99. </style>

  • 在左侧字母表中做上下拖拽的时候，城市列表内容也跟着变化

    1.  主要是监听拖拽时间，在li增加了三个事件，分别是touchstart、touchmove、touchend来监听拖拽事件，同时在li上使用ref，在data定义了一个touchStatus来保存是否在拖拽的状态，并使用计算属性把cities中的字母取出来放在数组letters中，最后计算拖拽到那个字母：

    handleTouchStart () {

    1.  this.touchStatus = true

    },
    handleTouchMove (e) {

    1.  if(this.touchStatus){
    2.    const startY = this.$refs['A'][0].offsetTop
    3.    const touchY = e.touches[0].clientY -79
    4.    const index = Math.floor((touchY-startY) / 20)
    5.    if(index >= 0 && index < this.letters.length) {
    6.      this.$emit('change',this.letters[index])
    7.    }
    8.  }

    },
    handleTouchEnd () {

    1.  this.touchStatus = false

    }

    Alphabet.vue：


列表切换性能优化

  • 把A字母离顶部的高度使用updated钩子函数来计算，不用每次执行handleTouchMove函数的时候都计算

    1.    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

  • 函数节流（定义了一个timer，如果正在执行拖拽操作，让它延迟16毫秒来执行，如果在16毫秒之间又执行了手指滑动操作，它就会把上次要做的操作清楚掉，重新执行这次要做的事情，从而减少handleTouchMove函数的执行频率）

    1.  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

Alphabet.vue：

  1. <template>
  2.   <ul class="list">
  3.     <li 
  4.       class="item" 
  5.       v-for="item of letters" 
  6.       :key="item"
  7.       :ref="item"
  8.       @touchstart="handleTouchStart"
  9.       @touchmove="handleTouchMove"
  10.       @touchend="handleTouchEnd"
  11.       @click="handleLetterClick"
  12.     >
  13.       {
  14.    {item}}
  15.     </li>
  16.   </ul>
  17. </template>
  18. <script>
  19. export default {
  20.   name:'CityAlphabet',
  21.   props: {
  22.    cities: Object
  23.   },
  24.   data () {
  25.     return {
  26.       touchStatus: false,
  27.       startY: 0,
  28.       timer: ''
  29.     }
  30.   },
  31.   computed: {
  32.     letters () {
  33.       const letters = []
  34.       for( let i in this.cities) {
  35.         letters.push(i)
  36.       }
  37.       return letters
  38.     }
  39.   },
  40.   updated () {
  41.     this.startY = this.$refs['A'][0].offsetTop
  42.   },
  43.   methods: {
  44.     handleLetterClick (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.         this.timer = setTimeout(()=> {
  56.           const touchY = e.touches[0].clientY -79
  57.           const index = Math.floor((touchY-this.startY) / 20)
  58.           if(index >= 0 && index < this.letters.length) {
  59.             this.$emit('change',this.letters[index])
  60.           }
  61.         }, 16)
  62.       }
  63.     },
  64.     handleTouchEnd () {
  65.       this.touchStatus = false
  66.     }
  67.   }
  68. }
  69. </script>
  70. <style lang="stylus" scoped>
  71.   @import '~styles/varibles.styl'
  72.   .list
  73.     display flex
  74.     flex-direction column
  75.     justify-content center
  76.     position absolute
  77.     top 1.58rem
  78.     right 0
  79.     bottom 0
  80.     width .4rem
  81.     .item
  82.       line-height .4rem
  83.       text-align center
  84.       color $bgColor
  85. </style>

最后git提交代码到GitHub上

搜索功能实现

  • City.vue传值到Search.vue子组件，通过watch监听用户输入，从而修改输入框下面显示的数组
  • 使用v-show判断用户是否输入了数据，从而实现查找到的数组内容区域的显示隐藏
  • 使用v-show判断用户输入的值是否有对应的值，来实现查找到的数组数据的显示和没有查到内容时的提示

  • 还使用了函数节流，让用户在输入后100毫秒再执行，如果用户在100毫秒之间再输入就会把上次的操作清楚掉，增强性能

    watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4

    Search.vue：


使用Vuex实现数据共享

  • 首先创建一个city-vuex的分支，这里需要实现的功能是点击城市列表页面中城市，首页的城市会发生改变

  • vuex数据框架是vue大型项目的数据传输使用的框架

    重要： vuex，我们可以想象成一个仓库，其中有State、Actions、Mutations；State是所有的公用数据都存在State中，组建需要使用公用的数据，直接去调用State就可以了；Actions是我们可以把需要实现异步操作或者是一些比较复杂的同步操作(批量的同步操作)存在Actions中；Mutations是对State同步的修改操作；组件中怎么使用？（1.组件先去调用Actions，紧接着Actions去调用Mutations，然后Motations去修改State中的数据；2.组件直接调用Motations去修改State中的数据）

    1.  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

  • 在项目中使用，先安装这个vuex

    1. npm install vuex --save

    然后在项目中创建这个”仓库区域”,我们把它叫做store，并创建index.js文件，最后在main.js中引入这个文件

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    4. Vue.use(Vuex)
    6. export default new Vuex.Store({
    7.   state: {
    8.     city: '成都'
    9.   },
    10.   mutations: {
    11.     changeCity (state, city) {
    12.       state.city = city
    13.     }
    14.   }
    15. })

    在组件中的使用（在List.vue和Search.vue中使用到了，实现效果就是在点击城市列表页的时候，通过调用mutations中的方法来改变State中的数据），对对应的地方绑定handleCityClick()方法并且在methods中定义这个方法

    1. <div 
    2.    class="button-wrapper" 
    3.    v-for="item of hot" 
    4.    :key="item.id"
    5.    @click="handleCityClick(item.name)"
    6. >
    7.   <div class="button">{
    8.      {item.name}}</div>
    9. </div>
    11. <div 
    12.    class="item border-bottom" 
    13.    v-for="innerItem of item" 
    14.    :key="innerItem.id"
    15.    @click="handleCityClick(innerItem.name)"
    16. >
    17.    {
    18.      {innerItem.name}}
    19. </div>
    21. handleCityClick (city) {
    22.   this.$store.commit('changeCity', city)
    23.   this.$router.push('/')
    24. }

    这个调用mutations中的方法使用的是commit，可以从上面的图看到；这样最简单的使用vuex就完成了

Vuex的高级使用及localStorage

  • 上面实现的功能会有问题，就是每次重启应用的时候，选择的城市会重置为State中预设的城市名，为了解决这个问题，在这里就引入了h5中的localStorage本地缓存来实现

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    4. Vue.use(Vuex)
    6. export default new Vuex.Store({
    7.   state: {
    8.     city: localStorage.city || '成都'
    9.   },
    10.   mutations: {
    11.     changeCity (state, city) {
    12.       state.city = city
    13.       localStorage.city = city
    14.     }
    15.   }
    16. })

    改进版（防止用户没有开启本地缓存功能或者是隐身模式）：

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    4. Vue.use(Vuex)
    6. let defaultCity = '上海'
    7. try {
    8.   if (localStorage.city) {
    9.     defaultCity = localStorage.city
    10.   }
    11. } catch (e) {}
    13. export default new Vuex.Store({
    14.   state: {
    15.     city: defaultCity
    16.   },
    17.   mutations: {
    18.     changeCity (state, city) {
    19.       state.city = city
    20.       try {
    21.         localStorage.city = city
    22.       } catch (e) {}
    23.     }
    24.   }
    25. })

    最终版（拆分成了state.js和mutations.js）：

    1. // state.js
    2. let defaultCity = '上海'
    3. try {
    4.   if (localStorage.city) {
    5.     defaultCity = localStorage.city
    6.   }
    7. } catch (e) {}
    9. export default {
    10.   city: defaultCity
    11. }
    13. // mutations.js
    14. export default{
    15.   changeCity (state, city) {
    16.     state.city = city
    17.     try {
    18.       localStorage.city = city
    19.     } catch (e) {}
    20.   }
    21. }
    23. // index.js
    24. import Vue from 'vue'
    25. import Vuex from 'vuex'
    26. import state from './state'
    27. import mutations from './mutations'
    29. Vue.use(Vuex)
    31. export default new Vuex.Store({
    32.   state,
    33.   mutations
    34. })

  • 还有个样式问题，就是选择四个字的城市时，顶部会被撑开，直接修改home/components下的Header.vue中的.header-right样式

    1. .header-right
    2.     min-width 1.04rem  //修改的
    3.     padding 0 .1rem    //新增的
    4.     float right
    5.     text-align center
    6.     color #ffffff

  • 优化代码：使用vuex提供的mapState来简化代码

    1. // home下的Header.vue的js部分
    2. <script>
    3. import { mapState } from 'vuex'    //新增
    4. export default {
    5.   name: 'HomeHeader',
    6.  computed: {                        //计算属性新增的
    7.    ...mapState(['city'])
    8.  }
    9. }
    10. </script>

    使用：

    1. <router-link to='/city'>
    2.   <div class="header-right">
    3.     {
    4.      {this.city}}            //从this.$store.state.city精简成的this.city
    5.     <i class="iconfont arrow-icon"></i>
    6.   </div>
    7. </router-link>

    city/components中List.vue：

    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">{
    9.      {this.currentCity}}</div>
    10.           </div>
    11.         </div>
    12.       </div>
    13.       <div class="area">
    14.         <div class="title border-topbottom">热门城市</div>
    15.         <div class="button-list">
    16.           <div 
    17.             class="button-wrapper" 
    18.             v-for="item of hot" 
    19.             :key="item.id"
    20.             @click="handleCityClick(item.name)"
    21.           >
    22.             <div class="button">{
    23.      {item.name}}</div>
    24.           </div>
    25.         </div>
    26.       </div>
    27.       <div 
    28.         class="area" 
    29.         v-for="(item,key) of cities" 
    30.         :key="key"
    31.         :ref="key"
    32.       >
    33.         <div class="title border-topbottom">{
    34.      {key}}</div>
    35.         <div class="item-list">
    36.           <div 
    37.             class="item border-bottom" 
    38.             v-for="innerItem of item" 
    39.             :key="innerItem.id"
    40.             @click="handleCityClick(innerItem.name)"
    41.           >
    42.             {
    43.      {innerItem.name}}
    44.           </div>
    45.         </div>
    46.       </div>
    47.      </div>
    48.   </div>
    49. </template>
    51. <script>
    52. import BScroll from 'better-scroll'
    53. import { mapState, mapMutations } from 'vuex'
    54. export default {
    55.   name:'CityList',
    56.   computed: {
    57.    ...mapState({
    58.      currentCity: 'city'  //这里使用的对象，就是把state中的city映射到这个组件的计算属性中这个值
    59.    })
    60.   },
    61.   props: {  
    62.     hot: Array,
    63.     cities: Object,
    64.     letter: String
    65.   },
    66.   methods: {
    67.     handleCityClick (city) {
    68.       // this.$store.commit('changeCity', city) 使用mutations的方法之前的调用
    69.       this.changeCity(city)
    70.       this.$router.push('/')
    71.     },
    72.     ...mapMutations(['changeCity'])   //使用mapMutations来简化mutations中的方法调用
    73.   },
    74.   mounted () {
    75.     this.scroll = new BScroll(this.$refs.wrapper)
    76.   },
    77.   watch: {
    78.     letter () {
    79.       if (this.letter) {
    80.         const element = this.$refs[this.letter][0]
    81.         this.scroll.scrollToElement(element)
    82.       }
    83.     }
    84.   }
    85. }
    86. </script>
    87. <style lang="stylus" scoped>
    88.   @import '~styles/varibles.styl'
    89.   .border-topbottom
    90.     &:before
    91.       border-color #ccc
    92.     &:after
    93.       border-color #ccc
    94.    .border-bottom
    95.     &:before
    96.       border-color #ccc
    97.   .list
    98.     overflow hidden
    99.     position absolute
    100.     top 1.58rem
    101.     left 0
    102.     right 0
    103.     bottom 0
    104.     .title
    105.       line-height .54rem
    106.       background #eee
    107.       padding-left .2rem
    108.       color #666
    109.       font-size .26rem
    110.     .button-list
    111.       padding .1rem .6rem .1rem .1rem
    112.       overflow hidden 
    113.       .button-wrapper
    114.         float left
    115.         width 33.33%
    116.         .button
    117.           margin .1rem
    118.           padding .1rem 0
    119.           text-align center
    120.           border .02rem solid #ccc
    121.           border-radius .06rem
    122.     .item-list
    123.     .item
    124.       line-height .76rem
    125.       padding-left .2rem
    126. </style>

    其他的组件一样使用这种方法来精简代码（这里我把之前创建的没有用的文件夹List和组件也删除了）

  • 另外讲一下vuex中的getter和module，这 getter就是store 的计算属性，通过把State中的数据计算后，组件就可以之间调用getter使用；module是当由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

    1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

使用keep-alive优化页面性能

  • 首先创建在GitHub一个city-keepalive的分支

  • 在App.vue中使用标签

    1. <template>
    2.   <div id="app">
    3.     <keep-alive>
    4.       <router-view/>
    5.       <!-- 显示的是当前路由地址所对应的内容 -->
    6.     </keep-alive>
    7.   </div>
    8. </template>
    10. <script>
    11. export default {
    12.   name: 'App'
    13. }
    14. </script>
    16. <style></style>

    作用是路由的内容加载过一次之后，就把路由中的内容放到内存之中，下次再重新进这个路由时，不需要重新渲染组件

  • 还有逻辑问题，就是在重新选择城市后在Home.vue中需要重新进行Ajax请求，在Home.vue中引入vuex

    1. import { mapState } from 'vuex'

    修改getHomeinfo方法，在请求的时候带上state中的city 

    1. getHomeinfo () {
    2.     axios.get('/api/index.json?city=' + this.city)
    3.       .then(this.getHomeinfoSucc)
    4. },

    这样修改后，重新选择城市也不会重新进行Ajax请求，这里就需要用到activated（使用keep-alive才有的钩子函数）使用mounted和activated这两个钩子函数来实现

    1. mounted () {
    2.     this.lastCity = this.city
    3.     this.getHomeinfo()
    4.   },
    5.   activated () {
    6.     if (this.lastCity !== this.city) {
    7.       this.lastCity = this.city
    8.       this.getHomeinfo()
    9.     }
    10.   }

    最后把代表提交到GitHub上

发表评论

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

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

相关阅读