阿里云赞助

<refresh> & <loading>

refresh & loading

v0.6.1+

Loading Components

To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.

Child Components

Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.

  • loading-indicator is a child component implemented with default animation effect for the refresh component.

Attributes

  • display has value of show or hide.

Styles

common styles: check out common styles for components

Events

  • onloading triggered when loading

Restrictions

  • refresh/loading does not support remove action, Weex 0.9 will fix it.
  • refresh/loading despite setting with display=’hide’, the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display=’hide’ when the refresh/loading should be hidden.
  • refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display=’hide’ when display=’show’ shows up in an event function, or your scroller may not response to user inputs.

Example

<template>
<scroller class="scroller">
<div class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</div>
<loading class="loading" @loading="onloading" :display="showLoading">
<text class="indicator">Loading ...</text>
</loading>
</scroller>
</template>
<script>
const modal = weex.requireModule('modal')
const LOADMORE_COUNT = 4
export default {
data () {
return {
showLoading: 'hide',
lists: [1, 2, 3, 4, 5]
}
},
methods: {
onloading (event) {
modal.toast({ message: 'loading', duration: 1 })
this.showLoading = 'show'
setTimeout(() => {
const length = this.lists.length
for (let i = length; i < length + LOADMORE_COUNT; ++i) {
this.lists.push(i + 1)
}
this.showLoading = 'hide'
}, 1500)
}
}
}
</script>
<style scoped>
.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;
}
.loading {
justify-content: center;
}
.indicator {
color: #888888;
font-size: 42px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
</style>

Refresh Components

To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.

Child Components

Any other components, like the text and img components, can be put inside the refresh component. And there is a special component named loading-indicator used only inside the refresh or the loading components.

  • loading-indicator is a child component implemented with default animation effect for the refresh component.

Attributes

  • display has value of show or hide, default value is show.

Other attributes please check out the common attributes.

Styles

common styles: check out common styles for components

Events

  • onrefresh: triggered when the scroller has been pulled down
  • onpullingdown: triggered when the scroller has been pulled down. you can get dy, pullingDistance, viewHeight, type from onpullingdown event object.

    dy: the differencen between two scroll actions
    pullingDistance: the distance of pulling
    viewHeight: the height of refreshView
    type: "pullingdown" constant string type for this event

Restrictions

  • refresh/loading does not support remove action, may support in Weex 0.9.
  • refresh/loading despite setting with display=’hide’, the refresh/loading view will still appear when scrolling due to known issues. it can be fixed with a another display=’hide’ when the refresh/loading should be hidden.
  • refresh/loading can only be hidden or displayed with an attribute display with value of show or hide. And there should be a statement of display=’hide’ when display=’show’ shows up in an event function, or your scroller may not response to user inputs.

example

<template>
<scroller class="scroller">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text class="indicator">Refreshing ...</text>
</refresh>
<div class="cell" v-for="num in lists">
<div class="panel">
<text class="text">{{num}}</text>
</div>
</div>
</scroller>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
data () {
return {
refreshing: false,
lists: [1, 2, 3, 4, 5]
}
},
methods: {
onrefresh (event) {
console.log('is refreshing')
modal.toast({ message: 'refresh', duration: 1 })
this.refreshing = true
setTimeout(() => {
this.refreshing = false
}, 2000)
},
onpullingdown (event) {
console.log('is onpulling down')
modal.toast({ message: 'pulling down', duration: 1 })
}
}
}
</script>
<style scoped>
.indicator {
color: #888888;
font-size: 42px;
text-align: center;
}
.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>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0