vivo-ui
Version:
vivo ui component lib for vue
139 lines (133 loc) • 4.1 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;
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">
<div>
下拉加载（请在移动浏览器上查看）
<load-more class="load-more" :pull="true" :duration="duration" direction="top"
@change="change" @release="release" @load="load">
<div slot="loading" class="loading" :style="loadingStyle">
<span class="icon" :style="iconStyle" 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>
</div>
<script>
var vm = new Vue({
el: '#content',
components: {
LoadMore: VUI.LoadMore
},
data() {
return {
duration: 500, // 必须保证loading的transitionDuration与duration属性一致
text: '下拉加载',
status: 'init', // 状态，包含init、loading、complete三种
isPulling: false, // 是否正在pull
progress: 0, // pull距离百分比
work: true,
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
}
},
computed: {
loadingStyle() {
return {
transform: this.status === 'init' ? `scale(${Math.min(this.progress / 100, 1)})` : '',
transitionDuration: `${this.status === 'init' && !this.isPulling ? this.duration : 0}ms`
}
},
iconStyle(){
return {
transform: this.status === 'init' ? `rotate(${3.6 * this.progress}deg)` : '',
backgroundImage: (() => {
switch (this.status) {
case 'init':
return `url(./loading.png)`
case 'loading':
return `url(./loading.gif)`
}
})(),
transitionDuration: `${this.status === 'init' && !this.isPulling ? this.duration : 0}ms`
}
}
},
methods: {
change(progress) {
this.isPulling = true
this.progress = progress
this.status = 'init'
this.text = progress > 100 ? '松开加载' : '下拉加载'
},
release(progress) { // 手指松开
this.isPulling = false
this.progress = progress >= 100 ? 100 : 0
},
load(callback){
if (this.work) {
this.status = 'loading'
this.text = '正在加载'
setTimeout(function () {
const length = this.list.length
this.list.push(length + 1, length + 2, length + 3)
this.list.push(length + 1, length + 2, length + 3)
this.list.length > 30 && (this.work = false)
this.status = 'complete'
this.text = '加载完成'
this.progress = 0
callback()
}.bind(this), 2000)
} else {
this.progress = 0
this.status = 'complete'
this.text = '没有更多内容了~'
setTimeout(callback, 1000)
}
}
}
})
</script>
</body>
</html>