************better-scroll是基于父元素固定高度,溢出才滚动的,所以父元素务必定高,否则无法滚动*********************************************
*第一步引入
——————参考https://ustbhuangyi.github.io/better-scroll/#/examples/en
_____https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/property.html
——————CDN方式
https://unpkg.com/better-scroll/dist/bscroll.min.js
*第二步(记得加上dropDown变量)因为是基于touchEnd事件,所以不必需要scrollIndex(为了保证每次加载只执行一次数据的控制)
this.scroll = new BScroll('.addFriends',{
scrollY: true,
click: true
});
console.log(this.scroll.maxScrollY,'66');
this.scroll.on('scroll', (pos) => {
console.log(pos.y,this.dropDown)
//如果下拉超过50px 就显示下拉刷新的文字
if(pos.y>50){
this.dropDown = true
}else{
this.dropDown = false
}
})
//touchEnd(手指离开以后触发) 通过这个方法来监听下拉刷新
this.scroll.on('touchEnd', (pos) => {
// 下拉动作
if(pos.y > 50){
console.log("下拉刷新成功")
this.dropDown = false
}
//上拉加载 总高度>下拉的高度+10 触发加载更多
if(this.scroll.maxScrollY>pos.y+10){
console.log("加载更多");
// this.scrollIndex++;
// if(this.scrollIndex == 1){
this.loadNextPage();
// }
//使用refresh 方法 来更新scroll 解决无法滚动的问题
this.scroll.refresh()
}
console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
})

better-scroll使用参考的更多相关文章

  1. html5手机常见问题与工具分享

    mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...

  2. 使用jQuery Mobile的注意事项(译)

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  3. mobileTech

    A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML ...

  4. (任寒韬)WebApp群主 - MobileTech 资料

    web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...

  5. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  6. 节流throttle和防抖debounce

    underscore.js提供了很多很有用的函数,今天想说说其中的两个.这两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜 ...

  7. mobilehack -转

    # mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...

  8. better-scroll的用法,及其中的一个属性event._constructed详解

    better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能. 实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可 ...

  9. 事件的节流(throttle)与防抖(debounce)

    事件的节流(throttle)与防抖(debounce) 有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动 ...

  10. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

随机推荐

  1. 20201104gryz模拟赛解题报告

    写在前面 \(Luckyblock\) 良心出题人, 题面好评 T1还是蛮简单的,用一个栈来维护就能过(某天听说 \(Luckyblock\) 出了套题,T1是个考栈的,看来就是这道了 注:栈的清空只 ...

  2. CF733F

    扯在前面 人生第一道黑(>▽< ). 那天听了老师讲图论讲了这道题,发现这道黑题并不是很黑于是就做了做,在同机房dalao的帮助下三个小时做完(太菜了),于是来发篇题解. 正文 题意 给出 ...

  3. NOI Linux 快速入门指南

    目录 关于安装 NOI Linux 系统配置 网络 输入法 编辑器 1. gedit 打开 配置 外观展示 2. vim 打开 配置 使用 makefile 编译运行 1. 编写 makefile 2 ...

  4. PowerBI官方文档

    Excel 帮助和学习 - Microsoft 支持https://support.microsoft.com/zh-cn/excel Power Query M 公式语言引用 - PowerQuer ...

  5. Excel 多种粘贴方式

    一.粘贴为数值. 这个功能是选择性粘贴中最常用的功能.因为excel主要功能之一就是用来做数据分析,把其他格式粘贴为数据格式才能进行数据运算,把带有公式的计算结果粘贴为数值格式可以使复制后的内容不会变 ...

  6. EasyConnect连接成功后,虚拟ip地位未分配

    文章目录 #问题描述: 今天公司做项目,连接上EasyConnect以后,显示连接成功,但是虚拟ip地址未分配,导致无法远程连接数据库,以及svn无法更新项目. #解决办法: 百度网上各种解决办法,没 ...

  7. CF-311B Cats Transport(斜率优化DP)

    题目链接 题目描述 小S是农场主,他养了 \(M\)只猫,雇了 \(P\) 位饲养员. 农场中有一条笔直的路,路边有 \(N\) 座山,从 \(1\) 到 \(N\)编号. 第 \(i\) 座山与第 ...

  8. 1561: (More) Multiplication

    Description Educators are always coming up with new ways to teach math to students. In 2011, an educ ...

  9. Codeforces Round #681 (Div. 2, based on VK Cup 2019-2020 - Final) A. Kids Seating (规律)

    题意:给你一个正整数\(n\),在\([1,4n]\)中找出\(n\)个数,使得这\(n\)个数中的任意两个数不互质且不能两两整除. 题解:这题我是找的规律,从\(4n\)开始,往前取\(n\)个偶数 ...

  10. Codeforces Global Round 4 B. WOW Factor (前缀和,数学)

    题意:找出序列中有多少子序列是\(wow\),但是\(w\)只能用\(vv\)来表示. 题解:我们分别记录连续的\(v\)和\(o\)的个数,用\(v1\)和\(v2\)存,这里要注意前导\(o\)不 ...