vue2中引用及使用 better-scroll的方法详解


Posted in Javascript onNovember 15, 2018

使用时有三个要点:

一: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

【注】 1. 这里只是举例,并不是一定要这样写。

2. 首先将 获取到的加了 ref 的div 的 高度固定, 可以设置定位, 也可以设置  height, max-height...

3. 加 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,
     scrollbar: true
    }

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 {
     this.scroll.refresh()
    }
   },
 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()
   })

总结

以上所述是小编给大家介绍的vue2中引用及使用 better-scroll的方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 #Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 #Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 #Javascript
vue 移动端适配方案详解
Nov 15 #Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 #Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 #Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
桌面中心(三)修改数据库
2006/10/09 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
园林技术个人的自我评价
2014/01/08 职场文书
2014年端午节活动方案
2014/03/11 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
技术入股合作协议书
2016/03/21 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书