part5 城市页面列表开发

1.配置路由

先在router文件夹中，创建一个路由。引入组件

{
      path: '/city',
      name: 'HelloCity',
      component: city,
      meta: {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
      }

2.点击页面跳转

<router-link to="/city">
       <div class="right">
         {{city}}
          <icon-svg icon-class="iconnewPPdaosanjiao" />
       </div>
     </router-link>

3.引入更高级区块滚动 better-scroll

npm install better-scroll -S

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling
</div>

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)