在【实现丰盛】的插件基础修改【vue2.0 移动端,下拉刷新,上拉加载更多 插件】,

1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页

2.修改加载完成文字提示

原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html

<template lang="html">
<div class="yo-scroll"
:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)"
@scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
<section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
<header class="pull-refresh">
<slot name="pull-refresh">
<span class="down-tip">下拉更新</span>
<span class="up-tip">松开更新</span>
<span class="refresh-tip">更新中……</span>
</slot>
</header>
<slot></slot>
<footer class="load-more">
<slot name="load-more">
<span>{{loadingText}}</span>
</slot>
</footer>
</section>
</div>
</template> <script>
export default {
props: {
offset: {
type: Number,
default: 40
},
loadingText: {
type: String,
default: '加载中...'
},
enableInfinite: {
type: Boolean,
default: true
},
enableRefresh: {
type: Boolean,
default: true
},
onRefresh: {
type: Function,
default: undefined,
required: false
},
onInfinite: {
type: Function,
default: undefined,
require: false
}
},
data() {
return {
top: 0,
state: 0,
startY: 0,
touching: false,
infiniteLoading: false
}
},
methods: {
touchStart(e) {
this.startY = e.targetTouches[0].pageY
this.startScroll = this.$el.scrollTop || 0
this.touching = true
},
touchMove(e) {
if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
return
}
let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
if (diff > 0) e.preventDefault()
this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) if (this.state === 2) { // in refreshing
return
}
if (this.top >= this.offset) {
this.state = 1
} else {
this.state = 0
}
},
touchEnd(e) {
if (!this.enableRefresh) return
this.touching = false
if (this.state === 2) { // in refreshing
this.state = 2
this.top = this.offset
return
}
if (this.top >= this.offset) { // do refresh
this.refresh()
} else { // cancel refresh
this.state = 0
this.top = 0
}
},
refresh() {
this.state = 2
this.top = this.offset
this.onRefresh(this.refreshDone)
},
refreshDone() {
this.state = 0
this.top = 0
this.infiniteLoading = false
}, infinite() {
this.infiniteLoading = true
this.onInfinite(this.infiniteDone)
}, infiniteDone() {
this.infiniteLoading = false
}, onScroll(e) {
if (!this.enableInfinite || this.infiniteLoading) {
return
}
let outerHeight = this.$el.clientHeight
let innerHeight = this.$el.querySelector('.inner').clientHeight
let scrollTop = this.$el.scrollTop
let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
if (bottom < infiniteHeight) this.infinite()
}
}
}
</script>
<style>
.yo-scroll {
position: absolute;
top: 2.5rem;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #ddd
}
.yo-scroll .inner {
position: absolute;
top: -2rem;
width: 100%;
transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.yo-scroll.touch .inner {
transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
display: block;
}
.yo-scroll.up .up-tip {
display: block;
}
.yo-scroll.refresh .refresh-tip {
display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
display: none;
}
.yo-scroll .load-more {
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
</style>

  把上面组件拷贝一下,保存vue文件pull-refresh.vue放到你的component/common文件夹下,  然后引入到页面 , 下面是引用demo

<template>
<div class="home"> <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" >
<ul class="list">
<li v-for="item in articleList">{{item.title}}</li>
</ul>
</v-scroll>
</div>
</template> <script>
import { AjaxPlugin, XButton,Group, Cell, XInput} from 'vux'
import Scroll from '../../common/pull-refresh'; export default {
name: 'home',
components: {
'v-scroll': Scroll,
Group,
XButton,
Cell,
XInput,
AjaxPlugin
},
data () {
return {
articleList:this.getArticleList(1),
loadingText:'加载中...',
counter : 1, //当前页面
num : 20, // 一次显示多少条
listdata: [], // 下拉更新数据存放数组
downdata: [] // 上拉更多的数据存放数组
}
},
mounted : function(){
//this.getArticleList();
},
methods: { getArticleList: function (catId) {
let _this = this
getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59}},function(data){
let arr = data.result.data;
_this.articleList=arr;
if(arr.length>=_this.num){
_this.counter++;
}
})
return []
},
onRefresh(done) {
let vm = this;
vm.loadingText='加载中……';
getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59}},function(data){
let arr = data.result.data;
vm.articleList=arr;
if(arr.length>=vm.num){
vm.counter=2;
}
done() // call done
})
},
onInfinite(done) {
let vm = this;
getDate('/index.php',{params:{m:'jsonp',c:'index',a:'lists',catid:59,page:vm.counter}},function(data){
let arr = data.result.data;
vm.articleList=vm.articleList.concat(arr);
if(arr.length<vm.num){
vm.loadingText='加载完毕……';
//vm.$el.querySelector('.load-more').style.display = 'none';
return;
}else{
vm.counter++;
}
done() // call done
})
}
}
} function getDate(url,params,fn) {
AjaxPlugin.$http.get(url, params)
.then((response) => {
if (fn) fn(response.data)
}) } function htttpRequest (url, params, cb) {
let dataStr = ''
for (let key in params) {
dataStr += key + '=' + params[key]
} dataStr = dataStr.substr(0, dataStr.length - 1)
console.log(dataStr);
AjaxPlugin.$http.post(url, params)
.then((response) => {
if (cb) cb(response.data)
})
} </script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
flex: 1;
margin: 10px ;
border-bottom:#ddd solid 1px;
} a {
color: #42b983;
}
</style>

  

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

随机推荐

  1. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  2. Congestion Avoidance in TCP

    Congestion Avoidance in TCP Consequence of lack of congestion control When a popular resource is sha ...

  3. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...

  4. golang 安装 guru vscode 安装失败

    1.先从git上复制下来 git clone https://github.com/golang/tools 2.再$GOPATH/bin中安装 go install golang.org/x/too ...

  5. python filter&sorted

    filter filter()接收一个函数和一个序列和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是True还是False决定保留还是丢弃该元素在一个list中, ...

  6. Linux:CentOS7卸载mysql

    步骤 方法一. 1.查看mysql安装 rpm -qa|grep -i mysql 2.卸载前关闭mysql服务 rpm -ev --nodeps mysql-community-release-el ...

  7. ZT 初始化 const 成员和引用类型成员(C++)

    初始化 const 成员和引用类型成员(C++) 初始化 const 成员和引用类型成员的问题,在 C++ 教材中讲述初始化列表的章节应该都有讲过,但是因为平时用得少,所以可能有不少人没注意到.待到用 ...

  8. Java中父类强制转换为子类的可能

    之前徒弟问了一个问题, 在Java中, 父类对象到底能不能转换成对应的子类对象? 到底能不能, 今天就来说说这个问题, 先看下面一段代码: package cn.com.hanbinit.test; ...

  9. 可用的rtmp卫视直播地址

    http://blog.csdn.net/chinabinlang/article/details/45092297[ 可用的rtmp卫视直播地址] http://blog.csdn.net/chin ...

  10. MATLAB入门学习(六)

    今天学三维作图 (*^__^*)…… 三维曲线作图 用到的命令:plot3 基本格式:plot3(x,y,z,s) 这里要画曲线,你需要知道该曲线的参数方程x=x(t),y=y(t),z=z(t) 然 ...