vivo-ui
Version:
vivo ui component lib for vue
109 lines (103 loc) • 2.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../page-scale.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="../../../dist/lib.js"></script>
<style>
#content {
font-size: .5rem;
}
.load-more {
height: 400px;
border: 1px solid;
}
.loading {
font-size: 0;
line-height: 1rem;
text-align: center;
}
.loading .icon {
display: inline-block;
vertical-align: middle;
margin-right: .2rem;
width: .7rem;
height: .7rem;
background: center no-repeat url(./loading.gif);
background-size: contain;
}
.loading .text {
vertical-align: middle;
color: #d37123;
font-size: .5rem;
}
.content {
font-size: 1rem;
background: grey;
}
</style>
</head>
<body>
<div id="content">
上划加载
<load-more class="load-more" :pull="false" :duration="duration" direction="bottom" @appear="appear" @load="load">
<div slot="loading" class="loading" :style="loadingStyle">
<span class="icon" v-show="['init','loading'].includes(status)"></span>
<span class="text">{{text}}</span>
</div>
<div class="content">
<div v-for="(value,index) in list" :key="index">{{value}}</div>
</div>
</load-more>
</div>
<script>
var vm = new Vue({
el: '#content',
components: {
LoadMore: VUI.LoadMore
},
data() {
return {
duration: 400,
text: '正在加载',
status: 'init', // 状态，包含init、loading、complete三种
work: true,
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
}
},
computed: {
loadingStyle() {
return {
transitionDuration: `${this.status === 'init' ? this.duration : 0}ms`
}
}
},
methods: {
appear() { // 手指松开
this.status = 'init'
this.text = '正在加载'
},
load(callback){
if (this.work) {
this.status = 'loading'
setTimeout(function () {
const length = this.list.length
this.status = 'complete'
this.text = '加载完成'
this.list.push(length + 1, length + 2, length + 3, length + 4, length + 5, length + 6, length + 7)
this.list.length > 30 && (this.work = false)
callback()
}.bind(this), 2000)
} else {
this.status = 'complete'
this.text = '没有更多内容了~'
setTimeout(callback, 1000)
}
}
}
})
</script>
</body>
</html>