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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JavaScript 基本概念
Jan 20 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 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
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue cli升级webapck4总结
2018/04/04 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
诚信考试倡议书
2014/04/15 职场文书
给校长的建议书500字
2014/05/15 职场文书
团日活动总结模板
2014/06/25 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书