Better-Scroll的封装

Bettor-Scroll.vue组件

<template><!-- wrapper必须要有高度 --><div class="wrapper"><!-- 当 content 的高度不超过父容器的高度，是不能滚动的 --><div class="content"><!-- 滚动内容 --><slot></slot></div></div>
</template><script>
import BetterScroll from "better-scroll";export default {data() {return {scroll: null,};},props: {probeType: {type: Number,default: 0,},pullUpLoad: {type: Boolean,default: true,},},mounted() {this.scroll = new BetterScroll(".wrapper", {movable: true,zoom: true,// 有些情况下某些配置是不需要的，所以不能写死，让使用者传递probeType: this.probeType, //是否需要监听滚动 默认值是0不监测，1也是不监测，2是手指在滚动的过程中进行监测，手指离开后就不监测，3，监测滚动的全过程pullUpLoad: this.pullUpLoad, //开启滚动条到达底部的事件监听。observeDOM: true, //允许滚动click: true,// 通过observeImage和observeImage可以动态的拓展滚动区域的高度observeImage: true, //当检测到图像加载或加载失败时，自动刷新 BetterScroll 的高度。keepAlive: true, //自动保存滚动的状态信息});if (this.pullUpLoad) {// 监听滚顶条是否到达底部this.scroll.on("pullingUp", () => {//监听的事件 pullingUp触发的话，就代表需要拉取更多的数据this.$emit("getMoreData");console.log("到达底部");//此时 上拉加载更多 发送ajax请求，/*  setTimeout(() => {this.scroll.finishPullUp();}, 2000); */});}},
};
</script><style></style>

2.使用组件

1.导入
import Scroll from "components/common/scroll/Scroll.vue";
2.注册
components: {Scroll,},
3.使用
<Scroll class="city-list-scroll"><ShowListCity:hotCityList="hotCityList":showAllCity="showAllCity"></ShowListCity></Scroll>
//注意一定要给Scroll 组件一个固定的高度，并且Scroll 组件内部内容的高度一定要操作Scroll 设置的高度

Better-Scroll的封装相关推荐

js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
28 - JavaScript 特效：scroll家族和缓动动画
缓动动画三个函数缓慢动画里,我们要用到三个函数,这里先列出来: Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入缓动动画的原理缓动动画 ...
【Android 应用开发】自定义组件宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...
html 手机楼层布局,纯html、css、javascript实现楼层跳跃式的页面布局
本文主要介绍了纯html+css+javascript实现楼层跳跃式的页面布局,需要的朋友可以参考下,希望能帮助到大家. 实现效果演示: 实现代码及注释: 楼层跳跃式的页面布局 *{ margin: ...
JavaScript原生实现广告栏滑动
全部代码 <!doctype html> <html lang="en"> <head><meta charset="UTF-8 ...
Vue商城——首页功能
Vue商城项目的前提工作用脚手架3创建项目 vue create 项目名称在GitHub上建一个仓库将项目与github联系起来 git init git add . git commit -m ...
javascript算法+手写js面试题
链表 function ListNode(val, next) {this.val = (val===undefined ? 0 : val)this.next = (next===undefined ...
仿肯德基宅急送App-Vue实战
前言 Vue学习有一段时间了,就想着用Vue来写个项目练练手,弄了半个月,到今天为止也算勉强能看了. 由于不知道怎么拿手机App的接口,并且KFC电脑端官网真的-一言难尽,所以项目所有数据都是我截图然 ...
关于移动端在cubeui中cube-scroll（以及better-scroll）里面写click会触发两次的问题
看了一下cube文档,里面的scroll是封装的better-scroll并且cube-scroll自带了一个apioptions支持better-scroll的原生语法于是就去better-scr ...

Better-Scroll的封装

Better-Scroll的封装相关推荐

最新文章

热门文章