vue better-scroll 下拉上拉，加载刷新

_initScroll(){

this.$nextTick(() => {

if (!this.scroll) {

this.scroll = new BScroll(this.$refs.bscroll, {

click: true,

scrollY: true,

probeType: 3

});

}else{

this.scroll.refresh();

}

this.scroll.on('scroll', (pos) => {

console.log(pos.y,this.dropDown)

//如果下拉超过50px 就显示下拉刷新的文字

if(pos.y>50){

　　　　// 显示刷新的element this.xxx = true;

}else{

// 隐藏刷新的element this.xxx = false;

}

})

//touchEnd（手指离开以后触发）通过这个方法来监听下拉刷新

this.scroll.on('touchEnd', (pos) => {

// 下拉动作

if(pos.y > 50){

console.log("下拉刷新成功")

// 隐藏刷新的element this.xxx = false;

}

//上拉加载总高度>下拉的高度+10 触发加载更多

if(this.scroll.maxScrollY>pos.y+10){

console.log("加载更多")

//使用refresh 方法来更新scroll 解决无法滚动的问题

this.scroll.refresh()

}

console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)

})

console.log(this.scroll.maxScrollY)

});

}

转载于:https://www.cnblogs.com/xzc666/p/9455861.html

vue better-scroll 下拉上拉，加载刷新相关推荐

上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用第一步:安装 npm install vue-infinite ...
uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
XRecyclerView上下拉加载刷新
1.配置build.gradle文件: 直接添加 compile 'com.jcodecraeer:xrecyclerview:1.3.2' 即可. 2.在xml文件的使用: <?xml ver ...
如何实现上拉加载，下拉刷新？
如何实现上拉加载,下拉刷新? 一.前言二.实现原理上拉加载下拉刷新三.案例小结一.前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同 ...
如何实现上拉加载和下拉刷新
下拉刷新和上拉加载这两种交互⽅式通常出现在移动端中本质上等同于PC⽹⻚中的分⻚,只是交互形式不同开源社区也有很多优秀的解决⽅案,如 iscroll . better-scroll . pullto ...
better-scroll 实现下拉刷新、上拉加载的那些坑
简介 better-scroll 是一款近几年移动端常用的插件,重点解决移动端(已支持PC)各种滚动场景需求的插件.可以实现竖向滚动效果,也可以实现横向滚动的效果.它不仅可以做普通的滚动列表,还可以做 ...
面试官：JavaScript如何实现上拉加载，下拉刷新？
一.前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll.better-scroll.pullto ...
Vue自定义指令实现下拉加载：v-loadmore
和methods平级: directives: {loadmore: {//自定义指令: 下拉加载bind(el, binding) { var p = 0; var t = 0; var down ...

vue better-scroll 下拉上拉，加载刷新

vue better-scroll 下拉上拉，加载刷新相关推荐

最新文章

热门文章