better-scroll 的使用

1.安裝

cnpm install better-scroll --save

2.引入

import BScroll from "better-scroll";

3.初始化

 data() {
      return {
          scroll: null
      }
  },

 methods: {
      initScroll() {
            this.scroll = new BScroll(this.$refs.area_scroll, {
              click: true
            });
      }
  },

獲取這個 DOM 對象

this.$refs.area_scroll

這行代碼就是來獲取dom  的 

{
              click: true
            } 


這個是插件的屬性方法

鏈接：https://better-scroll.github.io/docs/zh-CN/plugins/#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E5%B1%9E%E6%80%A7

 

4.我們可能是調取接口 拿到數據再進行滾動的 

 

 //請求接口拿到數據渲染到頁面上是一個異步的過程，created  生命周期是dom 還沒有進行渲染，使用nextTick會在dom 渲染后回調這個方法
                  //initScroll 由 Alphabet 傳入
                  this.$nextTick(() => {
                    this.$refs.allcity.initScroll();
   });

 

我們在created 生命周期調取接口 ，這個時候頁面還沒有被渲染，我們需要用到 this.$nextTick  這個方法

this.$nextTick  這個方法 可以讓我們在 mounted 生命周期完畢后再次回調這個方法，進行dom 的操作

 

Vue.nextTick()作用：在下次dom更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲得更新后的dom