vue2中引用 better-scroll的方法
文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法,使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下
使用时有三个要点: 一:html部分
<div class="example" ref="divScroll"> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div>
1.最外层加ref,让better-scroll通过ref来获取整个div; 2.紧跟一个div,不用加任何样式或class, 最终可以滑动的部分就是这个div,这个div必须是 加了ref 的div 的 直接子元素。 在这个div里面就可以放置希望滑动的内容了。
二: css部分
.example width: 100% position: absolute top: 174px bottom: 48px left: 0 overflow: hidden
- 这里只是举例,并不是一定要这样写。
- 首先将 获取到的加了 ref 的div 的 高度固定, 可以设置定位, 也可以设置 height, max-height...
- 加 overflow: hidden 。 三: js 部分 首先 引入 better-scroll:
import BScroll from 'better-scroll';
1: 使用 mounted() 函数
mounted() { this.scroll = new BScroll(this.$refs.divScroll, { click: true, }); },
2.使用 created() 函数
created() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.divScroll, { click: true, }); }); },
1.使用created 函数 要异步执行(此时html 尚未渲染完成)。 2. mounted函数 无需异步执行(mounted 函数在html渲染完成后触发)。
下面看下Vue中引入better-scroll的方法 1.用npm 安装好 better-scroll
npm install--save better-scroll
2.在需要的页面引入
import BScroll from 'better-scroll'
3.在data中定义 better-scroll的参数
options: { pullDownRefresh: { threshold: 50, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件 stop: 20 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置 }, pullUpLoad: { threshold: -20 // 在上拉到超过底部 20px 时,触发 pullingUp 事件 }, // pullDownRefresh: false, //关闭下拉 // pullUpLoad: false, // 关闭上拉 click: true, probeType: 3, startY: 0,//欢迎加入全栈开发交流圈一起学习交流:864305860 scrollbar: true//面向1-3年前端人员 }//帮助突破技术瓶颈,提升思维能力
4.在template中写入
<div class="wrapper" ref="wrapper" :scrollbar="options.scrollbar" :startY="options.startY">
5.在methods中写入方法,我自定义的
load() { if (!this.scroll) { this.scroll = new BScroll(this.$refs.wrapper, this.options); // 上拉 this.scroll.on('pullingUp', () => { // 刷新数据的过程中,回弹停留在距离顶部还有20px的位置 this.setData(); }) } else {//欢迎加入全栈开发交流圈一起学习交流:864305860 this.scroll.refresh()//面向1-3年前端人员 }//帮助突破技术瓶颈,提升思维能力 }, setData() { this.$nextTick(() => { let arr = [1, 2, 3, 'james']; this.data = this.data.concat(arr)// 添加数据 this.scroll.finishPullUp(); this.pullingDownUp() }) }, pullingDownUp() { this.scroll.refresh() //重新计算元素高度 },
6.在created中加载
this.$nextTick(() => { this.load() this.setData() })
结语
感谢您的观看,如有不足之处,欢迎批评指正。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
阿里巴巴Dubbo实现的源码分析
1. Dubbo概述 Dubbo是阿里巴巴开源出来的一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及作为SOA服务治理的方案。它的核心功能包括: #remoting:远程通讯基础,提供对多种NIO框架抽象封装,包括“同步转异步”和“请求-响应”模式的信息交换方式。 #Cluster: 服务框架核心,提供基于接口方法的远程过程调用,包括多协议支持,并提供软负载均衡和容错机制的集群支持。 #registry: 服务注册中心,使服务消费方能动态的查找服务提供方,使地址透明,使服务提供方可以平滑增加或减少机器。 这里我们只是补充一下从源码具体实现角度来看的某些细节方面,包括Invoker、ExtensionLoader等方面。任何官方已经介绍过的细节,我们不做画蛇添足,官方文档已经足够详实了,这篇文档的定位是补充实现的相关细节,是基于我在往Dubbo添加web service协议过程中,所碰到过的一些困难。 2. 服务提供者暴露一个服务的详细过程 上图是服务提供者暴露服务的主过程: 首先ServiceConfig类拿到对外提供服务的实际类ref(如:HelloWor...
- 下一篇
new Date() 在Safari下的 Invalid Date问题
问题复现 var timeStr = '2018-11-11 00:00:00'; var time = new Date(timeStr); // error: Invalid Date ... 在safari浏览器下,time为Invalid Date, 导致后面代码执行错误; 其他浏览器诸如chrome,firfox,ie运行正常,time为:Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)。 问题原因 在safari浏览器下,new Date() 无法识别像 YYYY-MM-DD HH:mm:ss、YYYY.MM.DD HH:mm:ss这样的格式,只能识别YYYY/MM/DD HH:mm:ss、YYYY-MM-DDTHH:mm:ss这样的格式,但是chrome,firfox,ie都做了很好的拓展,都能识别。 new Date('2018-11-11 00:00:00') /* chrome: Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间) (正常) safari: Invalid Date */ new ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Mario游戏-低调大师作品
- CentOS关闭SELinux安全模块
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS6,CentOS7官方镜像安装Oracle11G
- Hadoop3单机部署,实现最简伪集群
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作