懒癌发作……

本篇有关于列表滚动的内容，有点复杂，好好分析

0. 其它

vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 分析与引入相关库

• 静态页面效果

  
  
  静态页面.png
• 需要实现的效果

• 类名：current 标识当前分类（用于颜色变换等）

• 计算属性：currentIndex
  ———— scrollY : 右侧滑动的Y轴坐标
  ———— tops : 所有右侧分类 li 的top 组成的数组

• 代码实现

• 关于滑动

• BetterScroll
  这边的滑动就借助 BetterScroll ，挺好用的
  链接：betterscroll官网
  链接：better-scroll 作者文章《当 better-scroll 遇见 Vue》
  链接：better-scroll 社区地址

• 安装 BetterScroll
  根据官网，进行安装与引用
  npm install better-scroll --save
  在需要的页面引用：import BScroll from 'better-scroll'

2. 获取并计算相关数据

• 引入组件
  引用 BetterScroll 滑动组件与前面引用 Swiper 轮播组件的方式如出一辙，需要进行数据监测，获取的数据加载完成后再加载组件

methods: {
    ...mapActions('msite', ['getShopGoods']),
    // 使用组件
    _scrollY () {
      // 左侧类型列表
      new BScroll('.menu-wrapper', {
      })
      // 右侧食物列表
      new BScroll('.foods-wrapper', {
      })
    }

  },
computed: {
    ...mapState('msite', ['goods']),
    // 计算
    currentIndex () {
    }
  },
watch: { // 监测
    goods (value) {
      this.$nextTick(() => { // 数据加载完后执行
        this._scrollY()
      })
    }
  }

第一步：滑动效果实现

• 定义收集右侧列表滑动的Y轴坐标 scrollY的方法
  —— 看官网文档，需要使用 on 方法去进行绑定事件
  
  on方法
  
  —— 为on方法绑定scroll事件
  
  自定义事件

• 滑动的方式
  有三种方式，可以都试一下，看看效果，然后选择适用的

  
  
  probeType
• 分析选择
  根据打印效果选择，选择第二种方式最合适

methods: {
    ...mapActions('msite', ['getShopGoods']),
    // 使用组件
    _scrollY () {
      // 左侧类型列表
      new BScroll('.menu-wrapper', {
      })
      // 右侧食物列表
      const foodscroll = new BScroll('.foods-wrapper', {
        probeType: 2 // 惯性滑动不会触发
      })
      // 操作食物列表
      foodscroll.on('scroll', ({ x, y }) => {
        console.log('横坐标:' + x, '纵坐标:' + y)
        this.scrollY = Math.abs(y) // y轴的值转换为绝对值
      })
    }
  },
computed: {
    ...mapState('msite', ['goods']),
    // 计算
    currentIndex () {
    }
  },
watch: { // 监测
    goods (value) {
      this.$nextTick(() => { // 数据加载完后执行
        this._scrollY()
      })
    }
  }

• 链接：Math.abs()

滑动第一种类型.gif

滑动第二种类型.gif

滑动第三种类型.gif

3. 收集 tops

收集右侧列表滑动的Y轴坐标,选择第二种滑动方式

• 初始化时收集 tops

// 收集tops
    _initTops () {
      // 初始化,定义最上头的位置为0
      const toplis = []
      let top = 0
      toplis.push(top)
      // 收集
      // $refs 用于操作dom , foodsUl 为 ref='foodsUl' 设置在 ul 节点上，children 为取其下的 li 
      const lis = this.$refs.foodsUl.children
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight
        toplis.push(top)
      })
      // 更新数据
      this.tops = toplis
      console.log(toplis)
    }

• 链接：Function.prototype.call()
• 链接：Array.prototype.slice()

打印的所有tops坐标

4. 计算当前分类的下标

// 计算当前分类的下标
    currentIndex () {
      // 条件
      const { scrollY, tops } = this
      // 计算,取区间返回上一个值
      const index = tops.findIndex((top, index) => {
        console.log(top, index)
        // 返回结果： scrollY >= 当前top && scrollY < 下一个top
        return scrollY >= top && scrollY < tops[index + 1]
      })
      return index
    }

• 链接：Array.prototype.findIndex()
  

  滑动更新左侧分类.gif

• 解决惯性滑动的 bug
  惯性滑动的时候左侧分类不随着更新
  解决办法：查看 BetterScroll 官网，添加滑动结束的监听
  

  监听滑动结束.png

// 监听滑动结束
      foodscroll.on('scrollEnd', ({ x, y }) => {
        // console.log('横坐标:' + x, '纵坐标:' + y)
        this.scrollY = Math.abs(y) // 转换为绝对值
      })

5. 点击左侧分类滑动

• 添加点击事件
  <li class="menu-item " v-for="(good, index) in goods" :key="index" :class="{current:index === currentIndex}" @click="clickMenuItem(index)">

• 查看 BetterScroll 官网，找到相关方法 scrollTo
  

  scrollTo方法.png

• 方法

// 左侧分类列表点击事件
    clickMenuItem (index) {
      console.log(index)
      // 得到目标位置的scrollY
      const scrollY = this.tops[ index ]
      // 立即更新scrollY(让点击的分类项成为当前分类)
      this.scrollY = scrollY
      // 平滑滑动右侧列表
      this.foodscroll.scrollTo(0, -scrollY, 400)
    }

点击分类滑动.gif

6. 结束

这个滑动的功能看起来不难，但是分析起来感觉还是有些道道的；
前段时间有点生病，电脑又坏了，最坑爹的是刚过保修期维修花了500，真是花钱容易赚钱难，加之最近很浮躁，导致根本无心学习；
拖到现在，这个星期这个项目必结束。

点个赞呗！