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 事件执行频率提高性能

巴特西

part5 城市页面列表开发

最新文章

热门文章