一 安装

使用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. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  2. Unity Shader入门精要学习笔记 - 第14章非真实感渲染

    转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...

  3. ASP.NET MVC 复制MVC项目代码到同一个项目的时候报错The request for ‘home’ has found the following matching controll

    ASP.NET MVC 复制MVC项目代码到同一个项目的时候报错The request for ‘home’ has found the following matching controll “/” ...

  4. Todolist总结

    一.组件类里面的函数尽可能写成箭头函数的形式,方便绑定this 上面的箭头函数是好的,写面的不好,他需要在用的时候绑定this,或者在constructor绑定,如下: 如上用的时候绑定this是不好 ...

  5. 解析 MFC 中的 FromHandle

    MFC 对 Windows API 进行了封装,在很多方面都会提供便利.用 FromHandle 返回零时对象的指针,就可以调用各种类的方法.临时对象会在 OnIdle 中销毁.这里对 FromHan ...

  6. IT之家学院:使用CMD命令行满速下载百度云

    转自:https://www.toutiao.com/a6545305189685920259/?tt_from=android_share&utm_campaign=client_share ...

  7. PHP小数处理常用函数

    1.php保留两位小数并且四舍五入 $num = 123213.666666; echo sprintf("%.2f", $num); // 123213.67echo round ...

  8. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  9. POJ 2378 Tree Cutting (树的重心,微变形)

    题意: 给定一棵树,n个节点,若删除点v使得剩下的连通快最大都不超过n/2,则称这样的点满足要求.求所有这样的点,若没有这样的点,输出NONE. 思路: 只需要拿“求树的重心”的代码改一行就OK了.因 ...

  10. js 获取当前URL信息

    document.location 这个对象包含了当前URL的信息 location.host 获取port号 location.hostname 设置或获取主机名称 location.href 设置 ...