************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. editplus 5.0 破解

    先安装软件,安装步骤就不解释了,很傻瓜式的,一直下一步就行.   到了最重要的一步,请看仔细了!!!   在两个输入框中分别输入 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6 ...

  2. P1663 山

    写在前面 简单的二分答案,稍微加点数学计算,很有意思. 算法思路 二分答案可行的原因:答案具有单调性. 这道题目中证明一下:首先无限高显然是能看到任何一个点的,且山的每一条边都是对答案的一个限制,因此 ...

  3. 利用burp抓取https的包

    本片文章仅供学习使用,切勿触犯法律! 0x01.打开burp的代理监听器 0x02.使用代理访问 这里我是用的是mantra,其他浏览器同理. 0x03.浏览器输入http://burp 点击CA C ...

  4. Oracle数据传输MySQL中文编码问题

    最近捣鼓数据库,当使用Navicat将Oracle的数据传输给MySQL时,如果Oracle表中存在中文,则该表传输会出错,错误为: [ERR] 1366 - Incorrect string val ...

  5. Ajax(简介、基础操作、计算器,登录验证)

    Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...

  6. mysql在8.0版本下修改密码的命令

    ubuntu20.04上边部署了一个新的mysql服务,默认没密码,想要修改密码. 使用如下手段 第一种:ALTER USER 'root'@'localhost' IDENTIFIED BY '密码 ...

  7. java格式化json串

    package com.loan.modules.extbiz.in.rabbitmq.util; import com.loan.modules.extbiz.in.rabbitmq.excepti ...

  8. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  9. docker(5)docker运行web应用

    前言 前面我们运行的容器并没有一些什么特别的用处. 接下来让我们尝试使用 docker 构建一个 web 应用程序. 我们将在docker容器中运行一个 Python Flask 应用来运行一个web ...

  10. nginx反向代理signalr

    asp.net core应用常常要通过nginx来反向代理, 普通的web api配置asp.net core反向代理比较常见, 如果在应用中集成了signalr, 如何使用nginx来反代呢? ng ...