总结better-scroll插件的使用

在html文件中使用

先下载better-scroll / 引用

<script src="https://cdn.bootcdn.net/ajax/libs/better-scroll/2.4.1/better-scroll.js"></script>

设置html结构

<div class="wrapper"><ul class="content"><li>测试1</li><li>测试2</li><li>测试3</li><li>测试4</li><li>测试5</li><li>测试6</li><li>测试7</li><li>测试8</li><li>测试9</li><li>测试10</li><li>测试11</li><li>测试12</li><li>测试13</li><li>测试14</li><li>测试15</li><li>测试16</li><li>测试17</li><li>测试18</li><li>测试19</li><li>测试20</li></ul></div>

*外层只能对应一个子元素，其余的子元素会失效 *

对应的css

 /* 给外层元素设置固定的高度 */.wrapper {height: 400px;border: 1px solid #000;overflow: hidden;}

必定要给给外层元素设置高度，不然也会失效

创建BScroll对象

const BS = new BScroll(document.querySelector(".wrapper"))

第一个参数是生效的外层元素，第二参数是相应的配置项,

在vue脚手架中使用

npm下载

npm install better-scroll -S

将其封装进一个组件

<template><div class="wrapper" ref="wrapper"><div class="content"><slot></slot></div></div>
</template>
<script>
// 引入better-scroll插件
import BScroll from "better-scroll";
export default {mounted() {this.scroll = new BScroll(this.$refs.wrapper, {// 0,1不监测滑动的位置// 2 检测手指滑动时的位置// 3 监视滑动位置，包括手指离开的惯性滑动probeType: this.probeType,// 上拉加载更多pullUpLoad: this.pullUpLoad,// 开启div点击click: true,observeImage: true,});this.scroll.on("scroll", (position) => {this.$emit("scrollPx", position);});this.scroll.on("pullingUp", () => {this.$emit("pullingUp");});},
};
</script>

封装组件在html结构需要注意是，最外层wrapper，子元素是content，content下才是插槽

一般是在mounted函数下创建bscroll对象，
第一个参数是要生效的父元素，在vue中使用ref
因为使用querySelector获取dom元素很可能会与其他使用改组件的组件中类名冲突
第二参数则是相应的配置项
click开启，因为bscroll默认关闭原生浏览器的点击事件
probeType:0,1 不会开启滑动位置的监测，2开启手指滑动位置的监测，3开启滑动惯性的监测
pullUpLoad 则是是否开启上拉事件，当触底上拉就能配合pullingUp来返回回调函数

在组件中使用
引入

import Scroll from "@/components/common/scroll/Scroll.vue";

components: {   Scroll,},

使用

  <scroll class="bscroll" ref='scroll'>//这里包裹滑动生效区//可以有无数多子元素,因为在插件组件中已经设置好了俩父元素</scroll>

一般是在使用插件组件中设置css高度，更加灵活

.bscroll{position: absolute;top: 44px;bottom: 49px;left: 0;right: 0;
}

我学习到了什么？

ref
给普通元素标签加上ref，获取的是该元素
给组件标签加上的ref，获取到的是组件对象，并不是better-scroll插件本身
封装的思想

总结better-scroll插件的使用相关推荐

vue-scroller的使用开发自己的 scroll 插件
vue-scroller的使用在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...
Chrome-手动安装罗技Flow scroll插件
可能我的Chrome是用甲壳虫引导器的原因吧,安装Flow scroll后,没有自动给chrome安装插件,因此手动安装 1.在Flow scroll的安装目录下,有一个文件夹LogiSmoothFi ...
vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分（webpack-dev-conf.js做后端接口代理+scroll插件）
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...
vue 中的scroll插件vuescroll
vuescroll 官网:https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#detectresize 主要配置如下在dat ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue实现循环滚动 vue-seamless-scroll插件的安装与使用 1. 安装 2. 引入 3. 直接上代码 4. 结果 1. 安装 npm install vue-seamless-scro ...
ajax瀑布流 dede,dedecms加载更多,无限下拉瀑布流插件
这篇教程会使用到Infinite Ajax Scroll插件,即无限的ajax滚动,当页面滚动到容器可见部分将自动异步加载数据. 插件的集成很简单,分以下几个步骤: 1.页面中引用jquery.js ...
100个优秀jQuery插件精选
100个优秀jQuery插件精选在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...
工作中经常用到github上优秀、实用、轻量级、无依赖的插件和库（转）
原文地址 https://github.com/jawil/blog/issues/10 Echo.js – 简单易用的图片延迟加载插件 github:https://github.com/todd ...

总结better-scroll插件的使用

在html文件中使用

在vue脚手架中使用

总结better-scroll插件的使用相关推荐

最新文章

热门文章