Better-Scroll的安装

npm安装:npm install better-scroll --save
github安装下载地址:https://github.com/ustbhuangyi/better-scroll

使用

在组件中使用

在组件template模板中创建一个div标签(类名一般为wrapper)
div标签中必须只能传一个元素(但这个元素里面又可以包含许多元素)
在script标签中,引入better-scroll,并new一个实例.BetterScroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，BetterScroll 内部会尝试调用 querySelector 去获取这个 DOM 对象。

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

<template>
<div class="wrapper"><ul class="content"><li>分类列表1</li></ul>
</div>
</template><script>
import  BScroll from 'better-scroll'
export default {name:'pict',data(){return {scroll:null}},mounted(){this.scroll = new BScroll(document.querySelector('.wrapper'),{// 默认情况下BScroll是不可以实时的监听滚动位置// probe侦测 0,1都是不侦测实时的位置// 2： 在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测// 3 只要是滚动都侦测probeType:0,// 上拉加载更多pullUpLoad:true})// this.scroll.on('scroll',()=>{//     console.log(1)// })this.scroll.on('pullingUp',()=>{console.log('上拉加载更多哦');// 发送网络请求,请求更多页的数据// 等数据请求完成,并且将新的数据展示出来后setTimeout(()=>{// 上拉加载后,多次发送请求数据this.scroll.finishPullUp()},1000)})}
}
</script><style>.wrapper{/* overflow: scroll; */height: 150px;background-color: red;}
</style>

结语

想了解更多的话,请上官网查询哦https://better-scroll.github.io/docs/zh-CN/

Better-scroll的安装及使用相关推荐

Chrome-手动安装罗技Flow scroll插件
可能我的Chrome是用甲壳虫引导器的原因吧,安装Flow scroll后,没有自动给chrome安装插件,因此手动安装 1.在Flow scroll的安装目录下,有一个文件夹LogiSmoothFi ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
SecureCRT 下载，安装，绝佳配色，实用配置，上传下载配置合集
SecureCRT 下载,安装,绝佳配色,实用配置,上传下载配置合集 chocoball 发布于 2年前,共有 3 条评论 Secure CRT 是一款支持 SSH2.SSH1.Telnet.Teln ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
jupyter notebook快捷键总结及重要插件安装
1.命令模式 (press Esc to enable) F: find and replace Ctrl-Shift-P: open the command palette Enter: enter ...
linux下载python的es库,Elasticsearch py客户端库安装及使用方法解析
一.介绍 elasticsearch-py是一个官方提供的low-level的elasticsearch python客户端库.为什么说它是一个low-level的客户端库呢?因为它只是对elasti ...
elasticdump安装_elasticdump备份及恢复es数据
1.elasticdump备份还原 1.1elasticdump 简介用于转移和保存ES索引数据 # 获取集群的节点列表: curl 'localhost:9200/_cat/nodes?v' # ...
ERPLAB中文教程：ERPLAB安装与添加通道
目录安装ERPLAB 测试本分享为脑机学习者Rose整理发表于公众号:脑机接口社区 .QQ交流群:941473018 ERPLAB是免费开源的Matlab软件包,用于分析ERP等脑电数据.ERPL ...
snort完整安装（snort-2.8.3.1）
snort完整安装一(snort-2.8.3.1) 本来是打算做字符串匹配的,上网查了资料说是snort中有匹配算法,于是想自己装一个试试,真是没想到,一装就3个星期,还是好不容易才搞定的.闲话不说了 ...
源代码阅读工具Source-Navigator 在ubuntu 9.04下的安装与问题解决
在http://sourcenav.sourceforge.net/download.html下载最新版本6.0,安装 sudo ./configure sudo make install 安装完成后 ...

Better-scroll的安装及使用

Better-Scroll的安装

使用

在组件中使用

结语

Better-scroll的安装及使用相关推荐

最新文章

热门文章