一 安装

使用npm 安装
npm install vue-scroller -d

二 引入

import VueScroller from "vue-scroller"
Vue.use(VueScroller);

三 使用

   <tab>
<tab-item @on-item-click="e=>tabChange(0)" v-bind:selected="selectTabIndex=='0'?true:false">未验收</tab-item>
<tab-item @on-item-click="e=>tabChange(1)" v-bind:selected="selectTabIndex=='1'?true:false">已验收</tab-item>
</tab>
<scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" >
<scroller>
或者下图(中间的是模板)

在methods方法中增加refresh和infinite2个方法。

  methods: {
/**
* 下拉刷新
*/
refresh() {
console.log("refresh");
this.pageNumber = 1;
this.getOrderList(this.selectTabIndex);
}, /**
* 上拉获取
*/
infinite(done) {
this.pageNumber++;
console.log("infinite");
this.getOrderList(this.selectTabIndex, done);
},
/**
* 左右滑动设置初始值
*/
setInitParas(){
this.pageNumber = 1;
this.setloadingshow();
this.items=[]
this.$refs.my_scroller.finishInfinite(false);
},
/**
* 获取台账列表参数信息
*/
getOrderParams(index) {
//index为1表示已验货,0表示未验货 2
let dbconsignee_phone = localStorage.getItem("dbconsignee_phone");
var searchData = {
dbordernumber: "", //提货单号
dbconsignee_phone: dbconsignee_phone, //手机号码
acceptance_status: index,
pageSize:5, //一页多少数
pageNumber: this.pageNumber, //页码
order: "",
sort: ""
};
return searchData;
}, setloadingshow() {
this.$vux.loading.show({
text: "加载中"
});
}, /**
* 获取台账列表信息
*/
getOrderList(index, done) {
const that = this;
this.selectTabIndex = index;
const searchData = this.getOrderParams(this.selectTabIndex);
const params = {
url: "/receiver/bill/order/datalist",
reqparams: {
cmdData: JSON.stringify(searchData)
},
onSuccess(data) {
that.$vux.loading.hide();
const billJson = JSON.parse(data);
const newOrderItem = that.formatterOrderData(billJson.rows);
if (newOrderItem.length > 0) {
that.items = that.items.concat(newOrderItem);
}
if(typeof(done)=="function"){
done();
}
that.$refs.my_scroller.finishPullToRefresh();
if ( that.pageNumber >= billJson.pageCount ||billJson.pageCount == 0 ) {
that.$refs.my_scroller.finishInfinite(true);
}
}
};
http.getData(params);
},
}

四 使用的坑

  • 1 做的功能中左右切换使用的是同一个scroller,当一个数据加载完毕,切换到另外一个,不可以上拉获取数据。
    在切换tab页的时候调用this.$refs.my_scroller.finishInfinite(false)
    finishInfinite函数为scroller实例的方法,当参数为false时,上拉获取数据可以重新调用。当参数为true,上拉获取数据回调函数停止使用,下拉下部不再显示loading,会显示‘’暂无更多数据

  • 下拉刷新,刷新完毕,loading动画一直存在不消失。
    需要手动调用finishPullToRefresh。停止下拉刷新。
    调用方式:this.$refs.my_scroller.finishPullToRefresh();

  • infinite的回调函数done调用时间
    将后台获取的数据,复制到vue组件的数据源后,再进行调用done函数。如果在之前调用,会循环调用。如果不调用这个函数,上拉获取数据函数调用不成功。

并附官网API

API

翻译了一部分经常使用的

Attr. Name Description Required Default Value
onRefresh 下拉刷新 N -
onInfinite 上拉获取数据 N -
refreshText pull-to-refresh的提示信息 N 下拉刷新
noDataText 当全部数据加载完毕提示信息 N 没有更多数据
width scroller container width N 100%
height scroller container height N 100%
snapping enable snapping mode N false
snappingWidth snapping width N 100 (stand for 100px)
snappingHeight snapping height N 100
refreshLayerColor text color of pull-to-refresh layer N #AAA
loadingLayerColor text color of infinite-loading layer N #AAA
minContentHeight min content height (px) of scroll-content N 0

Scroller vm instance methods:

  • resize() resize scroller content (已经废弃)
  • triggerPullToRefresh() 触发下拉刷新
  • finishPullToRefresh() 完成下拉刷新.可以手动调用
  • finishInfinite(isNoMoreData :Boolean) 当参数为false时,上拉获取数据可以重新调用。当参数为true,上拉获取数据回调函数停止使用,下拉下部不再显示loading,会显示‘’暂无更多数据
  • scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
  • scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
  • getPosition :Object get current position of scroller content

另:

vue-scroller 是没有滚动监听事件的,我是这样解决的
 document.getElementsByClassName(
"_v-content"
)[0].addEventListener("transitionend",function(e){
self.showToTop = self.$refs.itemDetail_scroller.getPosition().top > 300;
})

监听变化

上面的方法 兼容不是很好可以重写下面的方法

 mounted() {
let self = this;
// debugger
// document
// .getElementsByClassName("_v-content")[0]
// .addEventListener("transitionend", function(e) {
self.$refs.category3_scroller.touchMoveold =
self.$refs.category3_scroller.touchMove;
self.$refs.category3_scroller.touchMove = function(t) {
self.showToTop = self.$refs.category3_scroller.getPosition().top > 300;
self.$refs.category3_scroller.touchMoveold(t);
}; //});
}

vue 的 scroller 使用的更多相关文章

  1. Vue Scroller:Vue 下拉刷新及无限加载组件

    Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...

  2. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  3. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  4. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  5. 2018年度 35 个最好用 Vue 开源库

    在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠 ...

  6. 35 个最好用的 Vue 开源库

    35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...

  7. 力荐!35 个最好用的 Vue 开源库!

    无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常便饭.所幸的是,随着 Vue.js 和 ...

  8. Github 上 36 个最实用的 Vue 开源库

    任何一个开发者,都是十分喜欢使用开源软件包的.因为它使开发工作变得更快速.高效.容易.如果没有开源软件包,开发工作将变得疲惫不堪,不断的重复造轮子! 下面整理了 Github 上 36 个实用的 Vu ...

  9. 35 个最好用 Vue 开源库

    2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...

随机推荐

  1. H5 之 Page Visibility

    这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态 ...

  2. 操作系统内核(linux)

    操作系统的内核(Kernel) 是一组程序,这组程序的重点在于管理计算机的所有活动以及驱动系统中的所有硬件. 有了内核后,开发者不必自己去考虑机器语言.所有硬件的相关参数.程序的可移植性.专一性了.但 ...

  3. 正则表达式匹配URL——给URL地址加上<a> 链接

    <?php function replace_url ($content) { if (empty($content)) return; //给URL地址加上 <a> 链接 $pre ...

  4. 编写可执行程序,其它程序调用,并返回数据,C#

    有时候在创建临时文件或文件夹,使用完成后,释放失败,删除提示占用,又不能结束主程序,就可以通过别的方法来解决 比如,另外创建一个程序,单独执行任务,完成后结束程序,并返回执行结果,上述问题就能解决. ...

  5. CF1060C Maximum Subrectangle

    思路: 不难发现,对矩阵中的数字求和实际上是先分别对a,b两个数列中对应子段的元素求和再相乘.题目是要求在和不超过给定值的情况下使选出的矩阵面积最大.我们反其道而行之,考虑在子段长度一定的情况下,和最 ...

  6. SourceInsight主题设置

    自己经常忘记怎样设置SourceInsight主题,这次一定要记住! 0. 退出SourceInsight软件1. 替换配置文件操作:拷贝Global.CF3到“我的文档\Source Insight ...

  7. 学习笔记——Paint 1(MaskFilter)

    对于Paint没有很好的深入的学习过,在工作之余再巩固巩固. 1.Paint的BlurMaskFilter(模糊效果) 自定义一个View继承View 重写里面的onDraw方法.这里直接上代码了: ...

  8. C 函数库 (libc,glibc,uClibc,newlib)

    glibc glibc和libc都是Linux下的C函数库,libc是Linux下的ANSI C的函数库:glibc是Linux下的GUN C的函数库:GNU C是一种ANSI C的扩展实现.ANSI ...

  9. iOS 如何解决并发请求时,只接受最后一个请求返回的结果

      大致意思是 虽然NSOperation 的cancel 并不能取消请求,但是可以对这个NSOperation进行标记. 当cancel 属性是YES时,表明 NSOperation虽然已经执行,并 ...

  10. copyin函数

    详见:http://pic.dhe.ibm.com/infocenter/aix/v6r1/index.jsp?topic=%2Fcom.ibm.aix.kerneltechref%2Fdoc%2Fk ...