Vue2.5开发去哪儿网App 城市列表开发

2019-02-27 11:52:04来源：博客园阅读 ()

1. 在 router目录下的 index.js文件中，新增路由

import City from '@/pages/city/City'

{
  path: '/city',
  name: 'City',
  component: City
}

2. 在city 目录下新建city文件夹，然后新建 City.vue

<template>
  <div>
 
  </div>
</template>

<script>

export default {
  name: 'City',
  components: {
    
  }
}
</script>

<style lang="stylus" scoped>

</style>

3.在首页的城市选择处，新增router-link 组件

<router-link to="/city">
  <div class="header-right">
    城市<span class="iconfont arrow-right">&#xe638;</span>
  </div>
</router-link>

二，城市选择

1. header部分在components 文件中新增 header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe606;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe6aa;</span>输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
      <div class="header-right">
        城市<span class="iconfont arrow-right">&#xe638;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>
<!--组件样式，不影响其他组件-->
<!--1rem = html front-size = 50px-->
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
 .header
  display flex
  line-height:$headerHeight
  background: $bgColor
  color: #fff
  .header-left
    margin-left: 0.1rem
    float:left
    width :.64rem
  .header-input
    padding-left:.2rem
    .back-icon
      text-align center
      font-size .4rem
    flex: 1
    height: .64rem
    line-height: .64rem
    margin-top: .12rem
    margin-left: .2rem
    padding-left: .2rem
    color: #ccc
    background: #fff
    border-radius: .1rem
  .header-right
    .arrow-right
      font-size .3rem
      margin-left -.05rem
    min-width: 1.04rem
    padding: 0 .1rem
    float: right
    text-align: center
    color: #ffffff
</style>

2. 在components 中新增 Search.vue

<template>
  <div class="search">
    <input type="text" class="search-input" placeholder="输入城市名或拼音">
  </div>
</template>

<script>
export default {
  name: 'CitySearch'
}
</script>
<!--组件样式，不影响其他组件-->
<!--1rem = html front-size = 50px-->
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
  .search
    height .72rem
    padding 0 .1rem
    background $bgColor
    .search-input
      padding 0 .1rem
      box-sizing border-box
      height .62rem
      line-height .62rem
      width 100%
      text-align center
      border-radius .06rem
</style>

目录结构:

效果：

三，列表布局

1. 在components 中新建List.vue

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">A</div>
        <div class="item-list">
          <div class="item border-bottom">阿里尔</div>
          <div class="item border-bottom">阿里尔</div>
          <div class="item border-bottom">阿里尔</div>
          <div class="item border-bottom">阿里尔</div>
          <div class="item border-bottom">阿里尔</div>
        </div>
      </div>
    </div>
  </div>
</template>

样式：

  @import "~styles/varibles.styl"
  .border-topbottom
    &:before
      border-color #ccc
    &:after
      border-color #ccc
  .border-bottom
  &:before
    border-color #ccc
  .list
    overflow hidden
    position absolute
    top 1.58rem
    right 0
    bottom 0
    left 0
    .title
      line-height .54rem
      padding-left .2rem
      background #eee
      color #666
      font-size .26rem
    .button-list
      padding .1rem .6rem .1rem .1rem
      overflow hidden
      .button-wrapper
        float left
        padding .1rem
        .button
          text-align center
          margin .1rem
          border .02rem solid #ccc
          border-radius .06rem
          padding .1rem .5rem
    .item-list
      .item
        line-height .76rem
        padding-left .2rem

2. 使用better-scroll 联级滚动

GIt地址：https://github.com/ustbhuangyi/better-scroll

安装： npm install better-scroll

使用：

CityList.vue

<div class="list" ref="wrapper">
   <div>
　　......
　　</div>
<div>

import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted: function () {
     //this.$refs.wrapper获取dom元素
     this.scroll = new BScroll(this.$refs.wrapper) 
  } 
}

3. 右侧字母表

新建 Alphabet.vue

<template>
  <div>
    <ul class="list">
      <li class="item">A</li>
      <li class="item">A</li>
      <li class="item">A</li>
      <li class="item">A</li>
      <li class="item">A</li>
      <li class="item">A</li>
      <li class="item">A</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet'
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .list
    position absolute
    right 0
    top 1.58rem
    bottom 0
    display flex
    width .4rem
    flex-direction column
    justify-content center
    .item
      text-align center
      line-height .4rem
      color $bgColor
</style>

View Code

目前效果：

4. 动态数据渲染

在static 目录下新建moc 文件夹，添加city.json文件

地址：https://github.com/1417766861/Vue2.5-App/blob/master/Travel/static/moc/city.json

发送ajax 请求：

import ApiUrl from '@/config/api_url'


......  
data () {
    return {
      cities: {},
      hotCities: []
    }
  },
  methods: {
    getCityInfo () {
      axios.get(ApiUrl.api + 'city.json')
        .then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        this.cities = res.data.cities
        this.hotCities = res.data.hotCities
      }
    }
  },
  mounted () {
    this.getCityInfo()
  }

/src/config/api_url.js

export default {
  api: '/static/moc/'
}

给组件添加数据：

    <city-list :cities="cities" :hotcities="hotCities"></city-list>
    <city-alphabet :cities="cities"></city-alphabet>

遍历显示，List.vue

      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="city in hotcities" :key="city.id">
            <div class="button">{{city.name}}</div>
          </div>
        </div>
      </div>
      <div class="area" v-for="(city,key) in cities" :key="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
          <div class="item border-bottom" v-for="c in city" :key="c.id">{{c.name}}</div>
        </div>
      </div>

遍历显示，Alphabet.vue

    <ul class="list">
      <li class="item" v-for="(item,key) in cities" :key="key">{{key}}</li>
    </ul>

效果：

代码地址：https://github.com/1417766861/Vue2.5-App

原文链接:https://www.cnblogs.com/donghaoblogs/p/10434160.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：如何使用javascript确定查询日期是否为有效日期

下一篇：vue中使用mui的extra icon问题

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签