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 } 这个是插件的属性方法
4.我们可能是调取接口 拿到数据再进行滚动的
//请求接口拿到数据渲染到页面上是一个异步的过程,created 生命周期是dom 还没有进行渲染,使用nextTick会在dom 渲染后回调这个方法 //initScroll 由 Alphabet 传入 this.$nextTick(() => { this.$refs.allcity.initScroll(); });
我们在created 生命周期调取接口 ,这个时候页面还没有被渲染,我们需要用到 this.$nextTick 这个方法
this.$nextTick 这个方法 可以让我们在 mounted 生命周期完毕后再次回调这个方法,进行dom 的操作
Vue.nextTick()作用:在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获得更新后的dom
越努力越幸运