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
better-scroll 的使用的更多相关文章
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 由overflow-x:scroll产生的收获
我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
随机推荐
- kafka集群安装及基本命令行使用
集群安装 环境介绍 本次安装kafka集群利用的是自带的zooKeeper,其实最好是把kafka和zooKeeper部署在不同的节点上,这样更高可用. 三个节点: kafka1:192.168.56 ...
- Centos6.5在线配置安装Java环境与Tomcat环境
书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5 链接工具:xshell脚本链接工具 一.安装Java开发 ...
- CAD到ArcGIS相关操作
1.Ctrl+N(新建图形)→复制原数据,粘贴到原坐标 2.将CAD数据转为矢量数据方法众多,此处将提供三种方法: 方法一:CAD转地理数据库注记 在[ArcToolBox]窗口中,双击[转换工具]→ ...
- oracle、sql developer 删除某用户下所有的表
1.在sql developer内 select 'drop table "'||table_name||'";' from cat where table_type= ...
- HDU 4321 Arcane Numbers 2
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4321 ----------------------------------------------- ...
- VS2017中英文切换
离线安装完成, --fix 检查下是否完整 安装时没有勾选的项, 可以下次再补安装 安装时出现缺少*.vsix 如:microsoft.visualstudio.webtoolsextensions. ...
- npm install 安装不成功,提示python2.7
npm install 安装不成功的原因 是因为缺少python的环境 解决方法: 1.去官网下载https://www.python.org/download/releases/2.7/ 2.安装成 ...
- selenium python 报错“ unable to find binary in default location”
selenium python 报错如下: raise exception_class(message, screen, stacktrace)selenium.common.exceptions.W ...
- 希希敬敬对Alpha阶段测试报告
已经完成的功能:1 GUI界面效果已经达到了设计要求,经过review代码完成度较好,GUI.PY代码可以使用,完成了“贴吧名字关键字与URL关联”. 2 能够实现"贴吧名字关键字与URL关 ...
- Chrome开启多线程下载
Chrome多线程下载也和标签页预览一样属于Google测试中的功能,可通过在地址栏输入chrome://flags/,然后在搜索框中输入Parallel downloading,选择enabled, ...