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)

 4.如果是循环中的ref 赋值的name  那么拿到这个ref的元素 需要用 this.$refs[name][0]

循环产生的ref this.$refs获得的不是一个标准dom元素 而是一个数组

5. 复杂列表布局

要做到一个吸顶效果 并且有弹性上下拉动

// list元素 上设置绝对定位
position:absolute;
top: 0
right 0
left 0
bottom 0
//相对于body  上下左右距离都是0
//然后
overflow: hidden
超出部分就隐藏
就造成无法拉动

吸顶 就top设置距离

//然后解决 页面固定了 如何拉动
//引入 better-scroll

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

6.兄弟组件的联动

//借助ref  和 better-scroll
//实现指定元素的跳转
//1.
this.scroll.scrollToElement(dom)
//其中this.scroll  是我们在mounted中注册过的
  mounted () {
    this.scroll = new BScroll(this.$refs.bscroll)
  },
// 2。ref
 var element = this.$refs[this.clickList][0]
//注意：⚠️循环得到的ref 是一个数组  需要加【0】

7.字母表的滑动影响页面跳转（兄弟组件的联动）

//用到三个移动端绑定时间函数
     @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
//希望只有在touchstart之后才可以出发touchmove里面的内容
//data里面定义一个 标示 。默认为false
 data () {
    return {
      active: false
    }
  },
//然后method中定义
    touchstart () {
      this.active = true
    },
    touchmove (e) {
      if (this.active) {
        console.log(e.target)
        var scrollY = Math.floor((e.touches[0].clientY - 98 - 82) / 15)
        var element = this.cities2[scrollY]
        this.$emit('change1', element)
      }
    },
    touchend () {
      this.active = false
    }
//

其中需要重点关注的知识点

滑动时间event.touches[0].clientY 当前触发时间的元素离顶部的距离

//我们用的方法为计算alphabet的单个字母长度。然后计算滑动的距离。除以字母长度，就知道滑到第几个

//期间还用到watch （为对象，需要监听的是数据对象格式，数据需要已经存在data）

//也有缓存性能  监听数据不改变 它不作用

 

// computed 其他和watch一样 就是数据不用定义data   一般数据计算都可以放在这里  计算结果需要返回

//计算属性 内置缓存

//当计算属性计算出的结果 依赖的数据不发生改变的情况
计算属性不多余计算，可以提高性能//就算页面重新渲染

 

8.列表切换性能优化

//函数中有计算固定值的 并且该函数频繁被执行  那么这个计算就多余

// updated  一般有数据变动 放在这个生命周期函数中

因为页面刚加载 通过父组件传过来数据ajax还没有拿到

当传给子组件的数据改变的时候  子组件就会重新渲染 这个时候updated就会被执行

这个时候子组件就完全动态渲染好 这个时候拿数据 就是最新的  而且不溶于

！！要数据一定在拿到ajax数据后再拿

8.2 节流

move移动的频率比较高 我们需要做一个节流

//data中设定一个 timer：null
//然后move时间函数中
if(this.timer) {
clearTimeout(this.timer)
}else {
this.timer = setTimeout(()=>{要做的事情},16)

//延迟16ms  如果16ms中还有滑动 就清除上次

//大大减少move 事件执行频率提高性能