Open CAT-SPIRIT opened 4 years ago
<template>
<list class="scroller">
<cell class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</cell>
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
<text class="indicator-text">Loading ...</text>
<loading-indicator class="indicator"></loading-indicator>
</loading>
</list>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
data () {
return {
loadinging: false,
lists: [1]
}
},
methods: {
onloading (event) {
modal.toast({ message: 'Loading', duration: 1 })
this.loadinging = true
setTimeout(() => {
this.loadinging = false
}, 2000)
},
}
}
</script>
<style scoped>
.loading {
width: 750;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.indicator-text {
color: #888888;
font-size: 42px;
text-align: center;
}
.indicator {
margin-top: 16px;
height: 40px;
width: 40px;
color: blue;
}
.panel {
width: 600px;
height: 250px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: #DDDDDD;
background-color: #F5F5F5;
}
.text {
font-size: 50px;
text-align: center;
color: #41B883;
}
</style>
@wqyfavor Have a look?
Describe the bug
When the list are less than screen heigh, the loading component will exceptional appear after I pull down list.
Environment
Expected behavior
Loading shouldn't appear when I pull down the list.