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

better-scroll 的使用的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  5. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  6. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  7. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  9. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  10. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...

随机推荐

  1. OC + RAC (四) combineLatest和merg

    -(void)_test4{ ///RAC combineLatest和merge // combineLatest只有当两个信号都发送了 订阅者才能收到信息 结果一次收到 结果是数组 // merg ...

  2. NotSerializableException

    这个错误是实体类没有  继承  Serializeble.

  3. [CF959B]Mahmoud and Ehab and the message题解

    超级大模拟 直接用map吧string对应到编号上来,然后在开个数组把每个编号对应到每个可以互相转化区块上来,预处理出区块的最小值,使用时直接取最小是即可 代码 #include <cstdio ...

  4. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  5. Java常用工具——java多线程

    一.线程的创建 方式一:继承Thread类,重写run()方法 package com.imooc.thread1; class MyThread extends Thread{ public MyT ...

  6. Delphi Indy IDHttp 403 forbidden

    http://hbk777.blog.163.com/blog/static/6058086200681594333361/ Delphi Indy IDHttp 403 forbidden 2006 ...

  7. Java IO(3)

    字符流相关 字符流基本上可以类比字节流 只不过是将字节流的byte 换为char. 最根本的两个类是Reader以及Writer Reader的子类有:BufferedReader, CharArra ...

  8. 20190820 On Java8 第十章 接口

    第十章 接口 接口和抽象类提供了一种将接口与实现分离的更加结构化的方法. 抽象类和方法 包含抽象方法的类叫做抽象类.如果一个类包含一个或多个抽象方法,那么类本身也必须限定为抽象的,否则,编译器会报错. ...

  9. html+css+js实现简单登陆注册页面

    先看一下最终效果,登陆和注册 背景图片: 附源码: login.html <!DOCTYPE html> <html lang="en"> <head ...

  10. inclusion_tag 基本使用

    inclusion_tag的用途 inclusion_tag可以实现从后台往前端传递绑定数据的样式,一般用来动态显示模板页面中显示固定格式的数据. inclusion_tag的用法 step1: 编写 ...