need to implement a scrolling page, title fixed at the top of the page function, through weex , but simple scrolling can, if a little more complex, the background color can not be set.
Note: copy the two effect codes to http://dotwe.org/vue/ respectively, and then download http://weex.apache.org/cn/tools/playground.htmlapp on the phone. You can see the effect by scanning
effect of failure:
<template>
<scroller>
<header>
<div class="banner-wrapper12">
<text class="banner12">HEADER123</text>
</div>
</header>
<list>
<template v-for="(index, i) in lists">
<header :key="`${index}-header`" v-if="i%2===0 && i != 0">
<text class="banner">{{index}} HEADER</text>
</header>
<cell :key="index">
<div class="panel">
<text class="text">{{index}}</text>
</div>
</cell>
</template>
</list>
</scroller>
</template>
<script>
export default {
data () {
return {
lists: [
"First", "Second", "Third", "Fourth",
"Fifth", "Sixth", "Seventh", "Eighth"
]
}
}
}
</script>
<style scoped>
.banner-wrapper12{
width: 750px;
font-size: 60px;
text-align: center;;
}
.banner12 {
padding: 25px;
font-weight: bold;
color: -sharp41B883;
background-color: rgba(255, 255, 255, 0);
}
.banner {
width: 750px;
padding: 25px;
font-size: 60px;
text-align: center;
font-weight: bold;
color: -sharp41B883;
background-color: rgb(162, 217, 192);
}
.panel {
width: 600px;
height: 300px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: -sharp41B883;
}
</style>
effect of ok
<template>
<list>
<header>
<div class="banner-wrapper">
<text class="banner">HEADER</text>
</div>
</header>
<cell v-for="index in lists" :key="index">
<div class="panel">
<text class="text">{{index}}</text>
</div>
</cell>
</list>
</template>
<script>
export default {
data () {
return {
lists: [
"First", "Second", "Third", "Fourth",
"Fifth", "Sixth", "Seventh", "Eighth"
]
}
}
}
</script>
<style scoped>
.banner-wrapper{
width: 750px;
font-size: 60px;
text-align: center;;
}
.banner {
padding: 25px;
font-weight: bold;
color: -sharp41B883;
background-color: rgba(255, 255, 255, 0);
}
.panel {
width: 600px;
height: 300px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: -sharp41B883;
}
</style>