vue 的 scroller 使用
一 安装
使用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 contentscrollBy(x:Integer, y:Integer, animate:Boolean)
scroll by a position in scroller contentgetPosition :Object
get current position of scroller content
另:
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 使用的更多相关文章
- Vue Scroller:Vue 下拉刷新及无限加载组件
Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- 2018年度 35 个最好用 Vue 开源库
在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠 ...
- 35 个最好用的 Vue 开源库
35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...
- 力荐!35 个最好用的 Vue 开源库!
无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常便饭.所幸的是,随着 Vue.js 和 ...
- Github 上 36 个最实用的 Vue 开源库
任何一个开发者,都是十分喜欢使用开源软件包的.因为它使开发工作变得更快速.高效.容易.如果没有开源软件包,开发工作将变得疲惫不堪,不断的重复造轮子! 下面整理了 Github 上 36 个实用的 Vu ...
- 35 个最好用 Vue 开源库
2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...
随机推荐
- 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移
一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...
- Unity Shader入门精要学习笔记 - 第14章非真实感渲染
转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...
- 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 “/” ...
- Todolist总结
一.组件类里面的函数尽可能写成箭头函数的形式,方便绑定this 上面的箭头函数是好的,写面的不好,他需要在用的时候绑定this,或者在constructor绑定,如下: 如上用的时候绑定this是不好 ...
- 解析 MFC 中的 FromHandle
MFC 对 Windows API 进行了封装,在很多方面都会提供便利.用 FromHandle 返回零时对象的指针,就可以调用各种类的方法.临时对象会在 OnIdle 中销毁.这里对 FromHan ...
- IT之家学院:使用CMD命令行满速下载百度云
转自:https://www.toutiao.com/a6545305189685920259/?tt_from=android_share&utm_campaign=client_share ...
- PHP小数处理常用函数
1.php保留两位小数并且四舍五入 $num = 123213.666666; echo sprintf("%.2f", $num); // 123213.67echo round ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- POJ 2378 Tree Cutting (树的重心,微变形)
题意: 给定一棵树,n个节点,若删除点v使得剩下的连通快最大都不超过n/2,则称这样的点满足要求.求所有这样的点,若没有这样的点,输出NONE. 思路: 只需要拿“求树的重心”的代码改一行就OK了.因 ...
- js 获取当前URL信息
document.location 这个对象包含了当前URL的信息 location.host 获取port号 location.hostname 设置或获取主机名称 location.href 设置 ...