Skip to content

infinite-scroll #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

infinite-scroll #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b08bfc
infinite-scroll
lxyPJ May 13, 2017
8028286
pull2refresh
lxyPJ May 14, 2017
6bcc426
pull2refresh
lxyPJ May 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions demo/src/list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,47 @@
<template>
<div class="demo-list">
<List></List>
<List infinite @load="loadHandle" refresh @refresh="refreshHandle">
<div slot="items" v-for="n in num" class="simple-list-item flex-rowstart-middle">
<div class="img"></div>
<div class="text-box">
<h2 class="title">我是一条标题，您可以自定义标题内容</h2>
<p class="sub-title">我是一条副标题，您可以自定义副标题内容</p>
<div class="sign">
<span class="describe">我是一个标签，您可以自定义标签内容</span>
</div>
</div>
</div>
</List>
</div>
</template>
<script>
export default {
name:'list'
name:'list',
data(){
return {
num: 0,
n: 1
};
},
methods:{
loadHandle (next, stop, error) {
setTimeout(() => {
this.num += 10;
this.n += 1;
if (this.n > 2) {
stop();
return;
}
next();
},1000);
},
refreshHandle (next, error) {
setTimeout(() => {
this.num = 10;
next();
},1000);
}
}
};
</script>
<style lang="less">
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@
"build": "webpack --config build/webpack.build.js -p"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"tween.js": "^16.6.0",
"vue": "^2.2.2",
"vue-router": "^2.3.0",
"babel-polyfill": "^6.23.0"
"vue-router": "^2.3.0"
}
}
208 changes: 190 additions & 18 deletions src/components/list/list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,206 @@
<template>
<div id="simple-list-container">
<ul id="simple-list-content">
<slot name="item">
<li class="simple-list-item flex-rowstart-middle">
<div class="img"></div>
<div class="text-box">
<h2 class="title">居臣氏(铺上大道二店)</h2>
<p class="sub-title">超市&nbsp;爱琴海购物公园&nbsp;279m</p>
<div class="sign">
<span class="describe">奖励金商家</span>
</div>
</div>
</li>
<div ref="scrollWindow" class="simple-list-container">
<div class="load-hint">
<slot name="pull-hint" v-if="refreshStatus === 0">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">下拉刷新</p>
</div>
</slot>
<slot name="release-hint" v-if="refreshStatus === 1">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">释放即可刷新</p>
</div>
</slot>
<slot name="refreshing" v-if="refreshStatus === 2">
<div class="simple-list-loading-box">
<Icon class="simple-list-loading-icon" type="loading" size="22"></Icon>
<p class="simple-list-loading-text">正在努力刷新…</p>
</div>
</slot>
</ul>
<slot name="refresh-success" v-if="refreshStatus === 3">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">刷新成功！</p>
</div>
</slot>
<slot name="refresh-error" v-if="refreshStatus === 4">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">刷新失敗！</p>
</div>
</slot>
</div>
<div ref="scrollContent" class="simple-list-content">
<slot name="items"></slot>
<div class="load-hint" @click="retry">
<slot name="loading" v-if="loading && infinite">
<div class="simple-list-loading-box">
<Icon class="simple-list-loading-icon" type="loading" size="22"></Icon>
<p class="simple-list-loading-text">正在努力加载…</p>
</div>
</slot>
<slot name="load-success" v-if="loadStatus === 1">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">加载成功！</p>
</div>
</slot>
<slot name="load-error" v-if="loadStatus === 2">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">加载失敗了，点我重试吧</p>
</div>
</slot>
<slot name="load-forbiddance" v-if="loadStatus === 3">
<div class="simple-list-loading-box">
<p class="simple-list-loading-text">我是有底线的！</p>
</div>
</slot>
</div>
</div>
</div>
</template>
<script>
import slideload from "./slideload.js";
import TWEEN from 'tween.js';
import Slideload from './slideload.js';
export default {
name:'list'
name:'list',
props:{
//是否开启无限滚动功能
infinite: {
type: Boolean,
default: false
},
//是否开启下拉刷新功能
refresh: {
type: Boolean,
default: false
},
//无限滚动提前加载距离
threshold: {
type: String,
default: ''
}
},
data () {
return {
slideload: null,
loading:false, //是否正在加载
loadStatus: 2, //0: 未执行, 1: 成功, 2: 失败, 3: 禁止执行
refreshing: false, //是否正在刷新
refreshStatus: 0 //0: 下拉刷新, 1: 释放刷新, 2:正在刷新, 3: 刷新成功, 4: 刷新失败
};
},
computed:{

},
methods: {
next () {
this.slideload.next();
if (this.loading) {
this.loading = false;
this.loadStatus = 1;
setTimeout(() => {
this.loadStatus = 0;
},800);
return;
}
this.slideload.recover();
this.refreshStatus = 3;
setTimeout(() => {
this.refreshStatus = 0;
},800);
},
error () {
this.slideload.next();
if (this.loading) {
this.loading = false;
this.loadStatus = 2;
return;
}
this.refreshStatus = 4;
setTimeout(() => {
this.refreshStatus = 0;
},800);
},
stop () {
this.slideload.stop();
this.loading = false;
this.loadStatus = 3;
},
retry () {
if (this.loadStatus !== 2) return;
this.slideload.lock("load");
this.slideload.triggerLoad();
}
},
mounted () {
let options = {
scrollCont:this.$refs.scrollContent,
vm: this
};
if (this.threshold !== '') {
options.threshold = Number(this.threshold);
}
this.slideload = new Slideload(this.$refs.scrollWindow,options);
if (this.infinite) {
this.slideload.on('load', () => {
this.loadStatus = 0;
this.loading = true;
/**
自定义事件'load', 列表滚动到底部触发
父组件在该事件的回调函数里向服务器请求数据
↓ next, stop, error 这三个函数作为事件回调函数的参数, 根据不同的请求状态手动调用 ↓
1. 如果请求成功并且还有数据 => next()
2. 如果请求失败 => error()
3. 如果请求成功, 但是没有更多数据了 => stop()
*/
this.$emit('load', this.next, this.stop, this.error);
});
}
if (this.refresh) {
this.slideload.on('refresh', () => {
this.refreshStatus = 2;
/**
自定义事件'refresh', 下拉距离超过50px并且手指释放后触发
父组件在该事件的回调函数里向服务器请求数据
↓ next, error 这两个函数作为事件回调函数的参数, 根据不同的请求状态手动调用 ↓
1. 如果如果刷新成功 => next()
2. 如果请求失败 => error()
*/
this.$emit('refresh', this.next, this.error);
});
}
}
}
</script>
<style lang="less" scoped>
<style lang="less">
@import '../../styles/index.less';
@import '../../styles/classes.less';
#simple-list-container{
.simple-list-container{
position:relative;
width:100%; height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
.load-hint{
width: 100%; height: 44px;
background-color:#f5f5f9;
}
}
.simple-list-content{
position:absolute; top:0; left:0;
width:100%;
}
.simple-list-loading-box{
width:100%; height:44px;
text-align:center;
&::before{
.inline-middle();
}
}
.simple-list-loading-icon,
.simple-list-loading-text{
display:inline-block;
vertical-align:middle;
}
.simple-list-loading-text{
font-size:15px;
}
.simple-list-item{
box-sizing:border-box;
Expand Down
Loading