better-scroll使用参考
************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使用参考的更多相关文章
- html5手机常见问题与工具分享
mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...
- 使用jQuery Mobile的注意事项(译)
翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...
- mobileTech
A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML ...
- (任寒韬)WebApp群主 - MobileTech 资料
web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- 节流throttle和防抖debounce
underscore.js提供了很多很有用的函数,今天想说说其中的两个.这两个函数都用于限制函数的执行. debounce 在解释这个函数前,我们先从一个例子看下这个函数的使用场景.假设我们网站有个搜 ...
- mobilehack -转
# mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...
- better-scroll的用法,及其中的一个属性event._constructed详解
better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能. 实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可 ...
- 事件的节流(throttle)与防抖(debounce)
事件的节流(throttle)与防抖(debounce) 有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动 ...
- Chrome DevTools – 键盘和UI快捷键参考
Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...
随机推荐
- socket更多方法
一.socket的更多方法介绍 ###socket更多方法服务端套接字函数 s.bind() 绑定(主机,端口号)到套接字 s.listen() 开始TCP监听 s.accept() 被动接受TCP客 ...
- MySql(三)存储过程和函数
MySql(三)存储过程和函数 一.什么是存储过程和函数 二.存储过程和函数的相关操作 一.什么是存储过程和函数 存储过程和函数是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程和函数 ...
- JQuery——基本概念
###JQuery语法 格式:$(selector).action() 美元符号$本身是JQuery对象的缩写 选择符selector查询和查找HTML元素 Action执行对元素的操作 ###JQu ...
- Spark-1.6.1 Hadoop-2.6.4 VMware Ubuntu 分布式集群搭建 全过程
本文从头开始零基础完全配置,适合小白. 本文在vmware中配置三台虚拟机,一台做Master,两台Worker,hadoop 和spark只需要在Master上配置,然后cp到worker上,包括配 ...
- 手机用itunes安装更新系统
1.[Shift+更新]:仅对固件进行更新,保留现有资料和已经安装的程序.但是已经越狱的iPhone或iPad禁止使用此方法!否则有后遗症!没有越狱的iPhone或iPad则可以直接使用此方式.2.[ ...
- OpenStack (云计算与openstck简介)
云计算 什么是云计算 云计算是一种按使用量付费的模式,这种模式提供可用的,便捷的,按需的网络访问,通过互联网进入可配置的计算资源共享池(资源包括,计算,存储,应用软件和服务) 云计算的特征 易于管理: ...
- Linux-服务管理命令chkconfig
Linux-服务管理命令chkconfig 一 chkconfig简介 chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服 ...
- Elastic Stack简介和Elasticsearch--先搞清楚概念第二篇
ELK 是三款软件的简称:分别是Elasticsearch. Logstash.Kibana组成 .在发展的过程中,又有新成员Beats等的加入,所以就形成了Elastic Stack.ELK 是旧的 ...
- ogn1.MethodFailedException:Method "xxx" failed for object xxx
问题描述:初学ssh写了个小项目,访问界面出现以下错误 java. lang. NoSuchllethodError: org. hi bernate. SessionF actory. openSe ...
- C++ Socket 入门
Socket 入门 前置知识 :计算机网络基础(TCP/IP四层模型) Socket 原意是"插座",在计算机通信领域被翻译为"套接字",以\(\{IP:Por ...