Vue.js学习笔记2 - better-scroll滚动条

原创
2019/11/17 04:27
阅读数 716

better-scroll滚动条

使用作者自制的better-scroll库,实现内容的滚动。

先在package.json加上依赖:

"better-scroll": "^0.1.7"

接着再npm install安装依赖。

import BScroll from 'better-scroll';
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
  click: true
})



上面BScroll就是这个滚动条的类,第一个参数是一个需要内容物滚动的DOM对象,第二个参数是滚动条的选项Options,是以JSON类型承载的。

然后我们就可以使用它来和DOM绑定了。值得注意的是,在BScroll中绑定的DOM叫this.$refs.menuWrapper,它所指向的是这个Vue页面中的所有的拥有ref属性的标签中名字为menuWrapper的那个,如下图。

<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuWrapper">
...




接着就可以把this._initScroll();这句代码加入到created()中:

  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    axios.get('/api/goods')
      .then(response => {
        const result = response.data;
        if (result.code === OK) {
          this.goods = result.data;
          this._initScroll(); // 加在这里,但却无法实现滚动效果
        }
      });
  },



无法滚动的原因是因为。Vue在计算高度的时候,当我加入BScroll的之后,Vue没有要跟着数据的更改做映射(当Vue在更新这个数据的时候是异步更新的,它将把一切更改都放在队列里等待),因此DOM没有变化,不能渲染出来。导致初始化BScroll()的时候,高度的计算就会有问题。

因此我们要使用Vue里面一个叫nextTick()的方法(要import Vue from 'vue';),数据变化后能够马上引起Vue的更新,能够让BScroll在数据更改后随着Vue的下一个回调的进行实时更新。

  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    axios.get('/api/goods')
      .then(response => {
        const result = response.data;
        if (result.code === OK) {
          this.goods = result.data;
          // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
          Vue.nextTick(() => {
            // 初始化滚动条
            this._initScroll()
            // 读取右侧所有分类的top值
            this._initTops()
          })
        }
      });
  },



v-for是一个能够实现返回多个参数的遍历语法。

<div v-for="(value, name, index) in object"> // 顺序必须为value第一,后面再接上name或者index
  {{ index }}. {{ name }}: {{ value }}
</div>



出来的效果就是

0.  title: How to do lists in Vue
1.  author: Jane Doe
2.  publishedAt: 2016-04-10


证明index返回的是当前JSON元素的位置(索引),name返回的是当前元素的key即键的字符串,value返回的就是当前元素值的字符串。

总结一下:

  1. 在和浏览器DOM的原生一些库进行交互的时候可以定义ref(或v-el)来在js中用this.$refs.xxx(或this.$els.xxx()访问到它。访问到它就相当于拿到了一个原生DOM。
  2. 还有要知道nextTick()这个接口。当我想要计算一些DOM相关的东西的时候,我们必须保证这个DOM已经渲染了。因为在Vue里面虽然说DOM是数据的自然映射,我们改变了数据就改变了DOM。但是其实DOM真正发生变化,其实是在这个nextTick()的回调函数执行后。所以我们在操作相关原生DOM的时候,我们一定要调用这个接口,然后在这个回调函数里做任何事情。这样做是非常安全的,这样能保证DOM良好,这样在计算DOM的一些值的时候就不会出错了。
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部