共计 1067 个字符，预计需要花费 3 分钟才能阅读完成。
注：请在手机上扫描预览效果（支持 ios、android）
<template>
<scroller>
<header class=”search”>
<text class=”text”>sdasxxxxxxxx</text>
</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>
.search{
background-color: red;
opacity: .1;
background-color: rgba(0,0,0,0.6)
}
.search .text{
background-color: rgba(0,0,0,0.6)
}
.banner {
width: 750px;
padding: 25px;
font-size: 60px;
text-align: center;
font-weight: bold;
color: #41B883;
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: #41B883;
}
</style>